import { FC, useMemo, useState } from 'react'
import { Input, DatePickerView, Button } from 'antd-mobile'
import styled from 'styled-components'
import { DateTimeType, BasicDateTimeValueType } from '@/types'
import { DownOutline, CloseCircleFill } from 'antd-mobile-icons'
import dayjs from 'dayjs'
import KMPopup from '../Popup'

interface DateFieldProps {
  value?: BasicDateTimeValueType
  required?: boolean
  dateType: DateTimeType
  onChange?: (value: BasicDateTimeValueType) => void
}
type PickerDate = Date & {
  tillNow?: boolean
}
type SelectType = 'start' | 'end'
type RangeValueType = [string, string]

const DateField: FC<DateFieldProps> = ({
  value = '',
  onChange,
  dateType = 'DATE'
}) => {
  const now = new Date()
  const [visible, setVisible] = useState(false)
  const [type, setType] = useState<SelectType>('start')
  const [selectDate, setSelectDate] = useState<PickerDate>(now)

  const triggerValue = (changedValue: BasicDateTimeValueType) => {
    onChange?.(changedValue)
  }
  const onValueChange = (val: BasicDateTimeValueType) => {
    triggerValue(val)
  }
  const checkRange = (range: RangeValueType): RangeValueType => {
    if (range[0] && range[1] && dayjs(range[0]).isAfter(dayjs(range[1]))) {
      return [range[1], range[0]]
    }
    return range
  }

  const handleDateTimeChange = (val: PickerDate, type: SelectType) => {
    setVisible(false)
    const precision = ['DATE_TIME', 'DATE_TIME_RANGE'].includes(dateType)
      ? 'YYYY-MM-DD HH:mm:ss'
      : 'YYYY-MM-DD'
    const tempVal = dayjs(val).format(precision)
    if (type === 'start') {
      if (!isRange) {
        onValueChange(tempVal)
      } else {
        const end = value?.[1]
        let ranges: RangeValueType = end ? [tempVal, end] : [tempVal, '']
        ranges = checkRange(ranges)
        onValueChange(ranges)
        if (!end) {
          setVisible(true)
          setType('end')
        }
      }
    } else {
      if (isRange) {
        const start = value[0] || ''
        let ranges: RangeValueType = [start, tempVal]
        ranges = checkRange(ranges)
        onValueChange(ranges)
        if (!start) {
          setVisible(true)
          setType('start')
        }
      }
    }
  }

  const handleClearChoose = (
    e: React.MouseEvent<SVGSVGElement, MouseEvent>
  ) => {
    e.stopPropagation()
    // if (type === 'start') {
    //   if (!isRange) {
    //     onValueChange('')
    //   } else {
    //     const end = value?.[1]
    //     onValueChange(['', end])
    //   }
    // } else {
    //   if (isRange) {
    //     const start = value[0] || ''
    //     onValueChange([start, ''])
    //   }
    // }
    if (!isRange) {
      onValueChange('')
    } else {
      onValueChange(['', ''])
    }
  }

  const handleCancel = () => {
    setVisible(false)
    if (isRange && (!value?.[0] || !value?.[1])) {
      onValueChange(['', ''])
    }
  }

  const isRange = useMemo(() => {
    return ['DATE_RANGE', 'DATE_TIME_RANGE'].includes(dateType)
  }, [dateType])

  const precision = useMemo(() => {
    return ['DATE_TIME', 'DATE_TIME_RANGE'].includes(dateType)
      ? 'second'
      : 'day'
  }, [dateType])

  const startValue = useMemo(() => {
    const tempVal = isRange ? value[0] : value
    return tempVal
  }, [value, isRange])

  const PickerStartValue = useMemo(() => {
    return startValue ? new Date(startValue as string) : ''
  }, [startValue])

  const PickerEndValue = useMemo(() => {
    const tempVal = value[1]
    return tempVal ? new Date(tempVal) : ''
  }, [value])

  const title = useMemo(() => {
    if (isRange) {
      return type === 'start' ? '请选择开始时间' : '请选择结束时间'
    } else {
      return '请选择时间'
    }
  }, [type, isRange])

  return (
    <>
      <DatePickerItem>
        <InputWrap
          className="field-child"
          onClick={() => {
            setVisible(!visible)
            setSelectDate(PickerStartValue || now)
            setType('start')
          }}
        >
          {startValue ? (
            <div className="adm-input-feign adm-input">
              <div className="adm-input-element">{startValue}</div>
              <CloseCircleFill
                onClick={e => handleClearChoose(e)}
                className="cancel-icon"
              />
            </div>
          ) : (
            <>
              <Input placeholder="请选择" readOnly />
              <DownOutline className="arrow-icon" />
            </>
          )}
        </InputWrap>
      </DatePickerItem>
      {isRange && (
        <DatePickerItem>
          <InputWrap
            className="field-child"
            onClick={() => {
              setVisible(!visible)
              setSelectDate(PickerEndValue || now)
              setType('end')
            }}
          >
            {value && value?.[1] ? (
              <div className="adm-input-feign adm-input">
                <div className="adm-input-element">{value[1]}</div>
                <CloseCircleFill
                  onClick={e => handleClearChoose(e)}
                  className="cancel-icon"
                />
              </div>
            ) : (
              <>
                <Input placeholder="请选择" readOnly />
                <DownOutline className="arrow-icon" />
              </>
            )}
          </InputWrap>
        </DatePickerItem>
      )}
      <KMPopup visible={visible} setVisible={setVisible}>
        <PopupHeader>
          {title}
          <CloseCircleFill onClick={handleCancel} />
        </PopupHeader>
        <DatePickerView
          className="km-picker-view"
          style={{
            '--item-font-size': '14px',
            '--item-height': '40px'
          }}
          precision={precision}
          defaultValue={now}
          value={selectDate}
          onChange={val => {
            setSelectDate(val)
          }}
        />

        <ButtonWrap>
          <Button
            block
            shape="rounded"
            color="primary"
            onClick={() => handleDateTimeChange(selectDate, type)}
          >
            确认输入
          </Button>
        </ButtonWrap>
      </KMPopup>
    </>
  )
}
const InputWrap = styled.div`
  position: relative;
  min-height: 40px;
  border-radius: 6px;
  .adm-input-feign {
    height: auto;
    /* max-width: 100%; */
    .adm-input-element {
      line-height: 19px;
      height: auto;
      padding: 3px 20px 3px 0;
    }
    .cancel-icon {
      position: absolute;
      right: 12px;
      top: 50%;
      color: #dcdcdc;
      transform: translateY(-50%);
    }
  }
  > .arrow-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
`
const ButtonWrap = styled.div`
  padding: 0 16px 16px 16px;
  .adm-button {
    background: linear-gradient(90deg, #f48930 0%, #f66416 100%);
    box-shadow: 0px 2px 8px 0px rgba(244, 137, 48, 0.3);
  }
`

const PopupHeader = styled.div`
  text-align: center;
  position: relative;
  padding: 15px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0px;
  border-bottom: 0.5px solid #dcdcdc;

  svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #dcdcdc;
    font-size: 16px;
  }
`
const DatePickerItem = styled.div`
  &:first-child {
    margin-bottom: 8px;
  }
`
export default DateField