import React, { useState, useEffect } from 'react';
import { TimePicker } from 'antd';
const { RangePicker } = TimePicker;
import moment from 'moment';

import { PlusCircleFilled,MinusCircleFilled,DeleteOutlined } from '@ant-design/icons';

import { Row,Col } from 'antd';
import { Color } from 'chalk';
import Item from 'antd/lib/list/Item';

const format = 'HH:mm';
import { timeToMoment } from '../../utils/time'

const disabledHours =() => [0,1,2,3,4,5,6,7,8,21,22,23]

const TimeSelect = (props:any) => {

  const {  defaultValue } = props;
  
  const [times, setTimes] = useState([])
  const [timesLen, setTimesLen] = useState(0)

  const [curString,setCurString]=useState({ButtonNum:1,resultList:[]})
  
  const showBtn = (type:number) => {
    var buttonNum = curString
    if (type ==0&&buttonNum.ButtonNum==1) {
      buttonNum.ButtonNum-=1
    } else if(type==1&&buttonNum.ButtonNum==0) {
      buttonNum.ButtonNum+=1
    }
    // console.log(buttonNum)
    setCurString(buttonNum)
  }
  const saveResult = (values:any) => {
    var tmp = curString
    tmp.resultList = values
    setCurString(tmp)
    // console.log("这里")
    // console.log(curString)
  }
  useEffect(() => {
    // console.log("时段选择器")
    // console.log(defaultValue)
    if (defaultValue != null) {
      var tmp = defaultValue
      var result=new Array()
      tmp.map((item, index) => {
        result.push({index:index,time:item})
      })
      setTimes(result)
      setTimesLen(result.length)
      var resultList= CheckParm(result)
      saveResult(resultList)
      // console.log(resultList)
      props.putSubmit(resultList)
    }
  }, [defaultValue]);
  
  useEffect(() => {

    // else {
    //   setTimes([{index: 0,time:null}])
    // }
  }, [])
  
  const add =() => {
    setTimesLen(timesLen + 1)
    showBtn(0)
    setTimes(times => ([...times, {index:timesLen + 1,time:null}]))
  }

  const Delete=(index:any,e:any) => {
    var tmp = times
    // console.log(times)
    // console.log(index)
    tmp.splice(index, 1);
    setTimes(times => ([...tmp]))

    
    var resultList = CheckParm(tmp)
    if (resultList.length == 0) {
      showBtn(1)
    }
    saveResult(resultList)
    // console.log(resultList)
    props.putSubmit(resultList)
  }
  const timeForm = (values: any) => {
    var result = new Array()
    values.map((items, index) => {   
      result.push(moment(items).format(format))  
    })
    return result[0] + "-" + result[1]
  }
  const CheckParm = (values: Array<any>) => {
    var tmp = new Array()
    values.map((item, index) => {
      if (item.time != null) {
        tmp.push(item.time)
      } else {
        tmp = []
      }
    })
    return tmp
  }
 
  const timeChange = (index: any, values: any) => {
    var tmp = times;
    // console.log("Maple诊断"+index)
    // console.log(values)
    if (values != null) {
      tmp[index].time =timeForm(values)
    } else {
      tmp[index].time =null
    }

    var resultList= CheckParm(tmp)    
    saveResult(resultList)
    if (resultList.length != 0) {
      showBtn(1)
    }
    props.putSubmit(resultList)
  }
  return (
    <>    
      <Row gutter={8}>
        <Col>
          {
            times.map((item, index) => {
              return (
                <Row key={item.index} style={{marginBottom:16}}>
                <Col>
                    <RangePicker disabledHours={disabledHours}  showTime disabled={props.disabled} defaultValue={timeToMoment(item.time)} minuteStep={5} format={format} onChange={timeChange.bind(this,index)}/>
                  </Col>
                  {
                    props.disabled ? null : <Col>
                      {
                         <DeleteOutlined style={{ cursor: "pointer", marginTop: 5, marginLeft: 8, color: "red" }} onClick={Delete.bind(this, index)} />
                      }
                      </Col>
                  }
                
                </Row>
              )
            })
          }
        </Col>    
        
        {
          props.disabled ? null : <Col>
            {
              curString.ButtonNum==1?<PlusCircleFilled style={{ fontSize: 20, cursor: "pointer", marginTop: 3, color: "rgba(24,144,255,1)" }} onClick={add} />:null
            }</Col>  
        }
       
      
      </Row>

    </>
  );
};

export default TimeSelect;
