import { View } from '@tarojs/components'
import { memo, useRef, useState } from 'react'
import dayjs from 'dayjs'
import NormalButton from '../normalButton'
import styles from './index.module.scss'
import AtCalendar from '@/components/calendar/index'
import Popup from '@/components/popup'

type DateArg = string | number | Date
interface Props {
  end?: DateArg
  start?: DateArg
  onSelectDate?: (any, isSameDay: boolean) => void
}
const TimePicker = (props: Props) => {
  const { start = '', end = '', onSelectDate } = props
  const [time, setTime] = useState<any>({})
  const isSameDay = useRef(false)
  const handTime = (e) => {
    const { start, end } = e.value
    isSameDay.current = start === end
    // 如果选的是同一天的日期, end 自动加一天
    if (!end) {
      // 判断如果没选下一天的时候
      e.value.end = `${dayjs(start).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
      isSameDay.current = true
    }
    else
    if (start === end) {
      e.value.end = `${dayjs(start).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`
    }
    else {
      e.value.start = `${dayjs(start).format('YYYY-MM-DD')} 00:00:00`
      e.value.end = `${dayjs(end).format('YYYY-MM-DD')} 23:59:59`
    }
    console.log('e===>', e)
    setTime(e)
  }
  // 由于小程序的bug，部分ios和安卓显示时间的时候会有问题，原因是格式化时有`-`这个横杠 被dayjs解决了
  return (
    <>
      <View className={styles['time-box']}>
        <AtCalendar
          isMultiSelect
          format="YYYY-MM-DD 00:00:00"
          currentDate={{
            start,
            end,
          }}
          onSelectDate={e => handTime(e)}
        />
      </View>
      <NormalButton type="primary" onClick={() => onSelectDate?.(time, isSameDay.current)} size="normal" round customClassName={styles['sure-box']}>确认</NormalButton>
    </>
  )
}
export default memo(TimePicker)