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

import { Lang } from "@scandic-hotels/common/constants/language"
import { dt } from "@scandic-hotels/common/dt"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"

import { locales } from "../locales"

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

type DatePickerSingleProps = {
  close: () => void
  startMonth?: Date
  hideHeader?: boolean
  selectedDate: Date
  handleOnSelect: (selected: Date) => void
}

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 lastDayOfPreviousMonth = dt(currentDate)
    .set("date", 1)
    .subtract(1, "day")
    .toDate()
  const yesterday = dt(currentDate).subtract(1, "day").toDate()

  // Max future date allowed to book kept same as of existing prod.
  const endDate = dt(currentDate).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: lastDayOfPreviousMonth, 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}>
                <Typography variant="Title/Subtitle/md">
                  <p>{props.children}</p>
                </Typography>
              </div>
            )
          },
        }}
      />
      <footer className={styles.footer}>
        <Button
          className={styles.button}
          intent="tertiary"
          onPress={close}
          size="large"
          theme="base"
        >
          <Typography variant="Body/Paragraph/mdBold">
            <span>
              {intl.formatMessage({
                id: "datePicker.selectDates",
                defaultMessage: "Select dates",
              })}
            </span>
          </Typography>
        </Button>
      </footer>
    </div>
  )
}