import {useDateTime} from "@fanam-pkg/core-utils"
import {MouseEvent} from "react"
import {assets} from "../../assets"
import {TextField} from "../../atoms"
import {useDialog} from "../../hooks"
import {DateTimePicker} from "../../molecules"
import {TextFieldCalendarProps} from "../../props"

export const TextFieldCalendar = (props: TextFieldCalendarProps) => {
  const {
    startDate,
    endDate,
    value,
    dateFormat,
    onChangeData,
    name,
    closable = false,
    pickerType = "date",
    disabled,
  } = props
  const {toggleDialog} = useDialog()
  const {formatDate, getJSDate} = useDateTime()

  const onSelect = (isTimePicker: boolean, date: Date) => {
    if (isTimePicker) showTimePicker(date)
    else {
      const formattedDate = formatDate(date.toISOString(), dateFormat)
      if (onChangeData) onChangeData(name ? {[name]: formattedDate} : formattedDate)
      toggleDialog()
    }
  }

  const showDatePicker = (date: Date) => {
    const minDate = typeof startDate === "object" ? startDate : getJSDate(startDate || "", dateFormat)
    const maxDate = typeof endDate === "object" ? endDate : getJSDate(endDate || "", dateFormat)

    toggleDialog({
      body: (
        <DateTimePicker
          minDate={minDate}
          maxDate={maxDate}
          selDate={date}
          onSelectDate={onSelect.bind(null, pickerType === "date-time")}
          onCancel={toggleDialog}
          type="date"
        />
      ),
      isClosable: closable,
    })
  }

  const showTimePicker = (date: Date) => {
    toggleDialog({
      body: (
        <DateTimePicker
          minDate={date}
          maxDate={date}
          selDate={date}
          onSelectDate={onSelect.bind(null, false)}
          onCancel={toggleDialog}
          type="time"
        />
      ),
      isClosable: closable,
    })
  }

  const onClick = (event: MouseEvent<HTMLInputElement>) => {
    event.currentTarget.blur()

    const selDate = value ? getJSDate(value as string, dateFormat) : new Date()

    if (!disabled) {
      if (pickerType === "time") showTimePicker(selDate)
      else showDatePicker(selDate)
    }
  }

  return <TextField {...props} onClick={onClick} tailingIcon={assets.ic_calendar}></TextField>
}