"use client"
import { DayPicker } from "react-day-picker"
import { useIntl } from "react-intl"

import { Lang } from "@/constants/languages"
import { dt } from "@/lib/dt"

import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"

import { locales } from "../locales"

import styles from "./mobile.module.css"
import classNames from "react-day-picker/style.module.css"

import type { DatePickerSingleProps } from "@/types/components/datepicker"

export default function DatePickerSingleMobile({
  close,
  handleOnSelect,
  selectedDate,
  hideHeader,
}: DatePickerSingleProps) {
  const lang = useLang()
  const intl = useIntl()

  /** English is default language and doesn't need to be imported */
  const locale = lang === Lang.en ? undefined : locales[lang]
  const currentDate = dt().toDate()
  const startOfCurrentMonth = dt(currentDate).set("date", 1).toDate()
  const yesterday = dt(currentDate).subtract(1, "day").toDate()

  // Max future date allowed to book kept same as of existing prod.
  const endDate = dt().add(395, "day").toDate()
  const endOfLastMonth = dt(endDate).endOf("month").toDate()

  return (
    <div className={`${styles.container} ${hideHeader ? styles.noHeader : ""}`}>
      <DayPicker
        classNames={{
          ...classNames,
          caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
          day: `${classNames.day} ${styles.day}`,
          day_button: `${classNames.day_button} ${styles.dayButton}`,
          month: styles.month,
          month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
          months: styles.months,
          root: `${classNames.root} ${styles.root}`,
          week: styles.week,
          weekday: `${classNames.weekday} ${styles.weekDay}`,
        }}
        disabled={[
          { from: startOfCurrentMonth, to: yesterday },
          { from: endDate, to: endOfLastMonth },
        ]}
        endMonth={endDate}
        formatters={{
          formatWeekdayName(weekday) {
            return dt(weekday).locale(lang).format("ddd")
          },
        }}
        hideNavigation
        lang={lang}
        locale={locale}
        mode="single"
        /** Showing full year or what's left of it */
        numberOfMonths={13}
        onDayClick={handleOnSelect}
        required
        selected={selectedDate}
        startMonth={currentDate}
        weekStartsOn={1}
        components={{
          MonthCaption(props) {
            return (
              <div className={props.className}>
                <Subtitle asChild type="two">
                  {props.children}
                </Subtitle>
              </div>
            )
          },
        }}
      />
      <footer className={styles.footer}>
        <Button
          className={styles.button}
          intent="tertiary"
          onPress={close}
          size="large"
          theme="base"
        >
          <Body color="white" textTransform="bold" asChild>
            <span>
              {intl.formatMessage({
                defaultMessage: "Select dates",
              })}
            </span>
          </Body>
        </Button>
      </footer>
    </div>
  )
}
