import React from 'react'
import PYAlert from '../../Common/alert/PYAlert'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {Picker} from '@react-native-picker/picker'
import {isFunction} from '../../Common/tool/TypeTool'

type PropsType = {
    onSelect: (hour: number, minute: number) => void
}

type StateType = {
    // 时
    hour: number
    // 分
    minute: number
}

export default class BirthdaySelectTimeAlert extends React.Component<PropsType, StateType> {
    state: StateType
    alertRef: PYAlert | null = null

    constructor(props: PropsType) {
        super(props)
        this.state = {
            hour: 0,
            minute: 0,
        }
    }

    render() {
        return (
            <PYAlert
                ref={e => (this.alertRef = e)}
                closeOnHardwareBackPress={false}
                closeOnTouchOutside={false}
                customView={this._renderCustomView()}
            />
        )
    }

    _renderCustomView = () => {
        return (
            <View style={styles.container}>
                {this._renderTitle()}
                {this._renderPickerView()}
                {this._renderCancelBtn()}
                {this._renderSureBtn()}
            </View>
        )
    }

    _renderTitle = () => {
        return <Text style={styles.title}>{'出生时间'}</Text>
    }

    _renderPickerView = () => {
        const hours = this._getHourNames()
        const hourViews = []
        for (let i = 0; i < hours.length; i++) {
            const hour = hours[i]
            const view = this._renderItem(hour, i)
            hourViews.push(view)
        }
        const minutes = this._getMinuteNames()
        const minuteViews = []
        for (let i = 0; i < minutes.length; i++) {
            const minute = minutes[i]
            const view = this._renderItem(minute, i)
            minuteViews.push(view)
        }
        return (
            <View style={styles.pickerBg}>
                <Picker<number>
                    style={styles.pickerHour}
                    mode={'dialog'}
                    selectedValue={this.state.hour}
                    onValueChange={this._onHourChanged.bind(this)}
                    itemStyle={styles.item}>
                    {hourViews}
                </Picker>
                <Picker<number>
                    style={styles.pickerMinute}
                    mode={'dialog'}
                    selectedValue={this.state.minute}
                    onValueChange={this._onMinuteChanged.bind(this)}
                    itemStyle={styles.item}>
                    {minuteViews}
                </Picker>
            </View>
        )
    }

    _onHourChanged = (itemValue: number, itemIndex: number) => {
        this.setState({
            hour: itemIndex,
        })
    }

    _onMinuteChanged = (itemValue: number, itemIndex: number) => {
        this.setState({
            minute: itemIndex,
        })
    }

    _renderItem = (item: string, i: number) => {
        return <Picker.Item style={styles.item} key={i} label={item} value={i} />
    }

    _renderCancelBtn = () => {
        return (
            <TouchableOpacity style={styles.cancelBtn} onPress={this._onPressCancelBtn.bind(this)}>
                <Text style={styles.cancelBtnTitle}>{'取消'}</Text>
            </TouchableOpacity>
        )
    }

    _onPressCancelBtn = () => {
        this.alertRef?.hide()
    }

    _renderSureBtn = () => {
        return (
            <TouchableOpacity style={styles.sureBtn} onPress={this._onPressSureBtn.bind(this)}>
                <Text style={styles.sureBtnTitle}>{'确定'}</Text>
            </TouchableOpacity>
        )
    }

    _onPressSureBtn = () => {
        this.alertRef?.hide()
        isFunction(this.props.onSelect) && this.props.onSelect(this.state.hour, this.state.minute)
    }

    _getHourNames = (): Array<string> => {
        const names: Array<string> = []
        const Zhi = '子丑寅卯辰巳午未申酉戌亥'.split('')
        for (let i = 0; i <= 23; i++) {
            const name = String(i).padStart(2, '0') + '（' + Zhi[Math.ceil(i / 2) % 12] + '）时'
            names.push(name)
        }
        return names
    }

    _getMinuteNames = (): Array<string> => {
        const names: Array<string> = []
        for (let i = 0; i <= 59; i++) {
            const name = String(i).padStart(2, '0') + '分'
            names.push(name)
        }
        return names
    }

    show = (hour: number, minute: number) => {
        this.setState({
            hour: hour,
            minute: minute,
        })
        this.alertRef?.show()
    }
}

const styles = StyleSheet.create({
    container: {
        width: 280,
        height: 320,
        borderRadius: 15,
        backgroundColor: 'white',
        alignItems: 'center',
    },
    title: {
        fontSize: 20,
        color: '#191919',
        marginTop: 16,
    },
    switchBtn: {
        position: 'absolute',
        width: 80,
        height: 60,
        right: 0,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    switchBtnTitle: {
        fontSize: 15,
        color: 'rgb(0,115,249)',
    },
    switchBtnImg: {
        width: 17,
        height: 17,
        resizeMode: 'contain',
        tintColor: 'rgb(0,115,249)',
    },
    cancelBtn: {
        position: 'absolute',
        width: 80,
        height: 40,
        left: 25,
        bottom: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#eeeeee',
        backgroundColor: 'white',
        borderWidth: 1,
        borderRadius: 5,
    },
    cancelBtnTitle: {
        fontSize: 17,
        color: '#191919',
    },
    sureBtn: {
        position: 'absolute',
        width: 80,
        height: 40,
        right: 25,
        bottom: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        backgroundColor: '#FFB3DB',
    },
    sureBtnTitle: {
        fontSize: 17,
        color: 'white',
    },
    pickerBg: {
        width: 320,
        marginTop: 10,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    pickerHour: {
        width: 150,
    },
    pickerMinute: {
        width: 110,
    },
    item: {
        fontSize: 16,
        paddingHorizontal: 1,
    },
})