import React, { useEffect, useState } from 'react'
import { Radio, Checkbox, Row, Col } from 'antd'
import styles from './HourOfDaySelect.less'
const HourOfDaySelect = props => {

    const { changeDay } = props

    const [selectValues, setSelectValues] = useState([])
    const { onChange, value } = props

    const hours = [
        { name: "0:00", value: '0' },
        { name: "1:00", value: '1' },
        { name: "2:00", value: '2' },
        { name: "3:00", value: '3' },
        { name: "4:00", value: '4' },
        { name: "5:00", value: '5' },
        { name: "6:00", value: '6' },
        { name: "7:00", value: '7' },
        { name: "8:00", value: '8' },
        { name: "9:00", value: '9' },
        { name: "10:00", value: '10' },
        { name: "11:00", value: '11' },
        { name: "12:00", value: '12' },
        { name: "13:00", value: '13' },
        { name: "14:00", value: '14' },
        { name: "15:00", value: '15' },
        { name: "16:00", value: '16' },
        { name: "17:00", value: '17' },
        { name: "18:00", value: '18' },
        { name: "19:00", value: '19' },
        { name: "20:00", value: '20' },
        { name: "21:00", value: '21' },
        { name: "22:00", value: '22' },
        { name: "23:00", value: '23' },
    ]
    const onTypeChange = e => {
        let values = []
        switch (e.target.value) {
            case 0:
                values = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
                break
            case 1:
                const arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
                let newArr = []
                selectValues && arr.map(item => {
                    if (!selectValues.includes(item)) {
                        newArr.push(item)
                    }
                })
                values = newArr
                break
            case 2:
                values = ["6", "8"]
                break
            case 3:
                values = ["0", "8", "16"]
                break
            case 4:
                values = ["0", "6", "12", "18"]
                break
        }
        onChange && onChange(values)
        setSelectValues(values)
        changeDay(values)
    }

    useEffect(() => {
        setSelectValues(value)
    }, [props])
    const onCheckChange = (value) => {
        setSelectValues(value)
        onChange && onChange(value)
        changeDay(value)
    }
    return (
        <div className={styles.hourOfDay_container}>
            <Radio.Group onChange={onTypeChange} style={{ marginBottom: '0.5rem' }} >
                <Radio style={{ width: '85px' }} value={0}>全选</Radio>
                <Radio style={{ width: '85px' }} value={1}>反选</Radio>
                <Radio style={{ width: '88px' }} value={2}>一天两次</Radio>
                <Radio style={{ width: '88px' }} value={3}>一天三次</Radio>
                <Radio style={{ width: '88px' }} value={4}>一天四次</Radio>
            </Radio.Group>
            <Checkbox.Group value={selectValues} onChange={onCheckChange}>
                <Row>
                    {
                        hours.map((item, idx) => {
                            return (
                                <Col span={4} key={idx}>
                                    <Checkbox value={item.value}>{item.name}</Checkbox>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Checkbox.Group>
        </div>
    )
}
export default HourOfDaySelect;