web/apps/scandic-web/components/DatePicker/Single/Desktop.tsx

"use client"

import { useState } from "react"
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 Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
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 "./desktop.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 DatePickerSingleDesktop({
  close,
  handleOnSelect,
  selectedDate,
  startMonth,
}: DatePickerSingleProps) {
  const lang = useLang()
  const intl = useIntl()
  const [month, setMonth] = useState(() => startMonth ?? new Date())

  /** 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()

  function handleMonthChange(selected: Date) {
    setMonth(selected)
  }

  return (
    <DayPicker
      classNames={{
        ...classNames,
        caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
        day: `${classNames.day} ${styles.day}`,
        day_button: `${classNames.day_button} ${styles.dayButton}`,
        footer: styles.footer,
        month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
        months: `${classNames.months} ${styles.months}`,
        range_end: styles.rangeEnd,
        range_middle: styles.rangeMiddle,
        range_start: styles.rangeStart,
        root: `${classNames.root} ${styles.container}`,
        week: styles.week,
        weekday: `${classNames.weekday} ${styles.weekDay}`,
        nav: `${classNames.nav} ${styles.nav}`,
        button_next: `${classNames.button_next} ${styles.button_next}`,
        button_previous: `${classNames.button_previous} ${styles.button_previous}`,
      }}
      disabled={[
        { from: lastDayOfPreviousMonth, to: yesterday },
        { from: endDate, to: endOfLastMonth },
      ]}
      footer
      formatters={{
        formatWeekdayName(weekday) {
          return dt(weekday).locale(lang).format("ddd")
        },
      }}
      lang={lang}
      locale={locale}
      mode="single"
      month={month}
      numberOfMonths={2}
      onDayClick={handleOnSelect}
      onMonthChange={handleMonthChange}
      required={false}
      selected={selectedDate}
      startMonth={currentDate}
      endMonth={endDate}
      weekStartsOn={1}
      components={{
        Chevron(props) {
          return (
            <MaterialIcon
              icon="chevron_left"
              className={props.className}
              size={20}
            />
          )
        },
        Footer(props) {
          return (
            <>
              <Divider
                className={styles.divider}
                color="Border/Divider/Subtle"
              />
              <footer className={props.className}>
                <Button
                  intent="tertiary"
                  onPress={close}
                  size="small"
                  theme="base"
                >
                  <Caption color="white" type="bold" asChild>
                    <span>
                      {intl.formatMessage({
                        id: "datePicker.selectDates",
                        defaultMessage: "Select dates",
                      })}
                    </span>
                  </Caption>
                </Button>
              </footer>
            </>
          )
        },
        MonthCaption(props) {
          return (
            <div className={props.className}>
              <Typography variant="Title/Subtitle/md">
                <p>{props.children}</p>
              </Typography>
            </div>
          )
        },
      }}
    />
  )
}