/* eslint-disable no-case-declarations */
/* eslint-disable no-unused-expressions */
/* eslint-disable default-case */
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(values);
    setSelectValues(values);
    changeDay(values);
  };

  useEffect(() => {
    setSelectValues(value);
  }, [props]);

  const onCheckChange = val => {
    setSelectValues(val);
    onChange(val);
    changeDay(val);
  };
  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;