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


const HourOfDaySelect = 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:
                values = []  
                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)
    }

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