web/apps/scandic-web/components/DatePicker/Range/Mobile.tsx

"use client"
import { useEffect, useRef, useState } from "react"
import { type DateRange, DayPicker } from "react-day-picker"
import { useIntl } from "react-intl"

import { Lang } from "@scandic-hotels/common/constants/language"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { dt } from "@/lib/dt"

import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
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 { DatePickerRangeProps } from "@/types/components/datepicker"

export default function DatePickerRangeMobile({
  close,
  handleOnSelect,
  selectedRange,
}: DatePickerRangeProps) {
  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 monthsRef = useRef<HTMLDivElement | null>(null)
  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true)

  const currentDate = dt().toDate()
  const startOfCurrentMonth = dt(currentDate).set("date", 1).toDate()
  const yesterday = dt(currentDate).subtract(1, "day").toDate()
  useEffect(() => {
    if (!monthsRef.current || !selectedRange?.from || !autoScrollEnabled) return

    const selectedDay = monthsRef.current.querySelector(
      'td[aria-selected="true"]:not([data-outside="true"])'
    )

    const targetMonth = selectedDay?.closest(`.${styles.month}`)

    if (targetMonth) {
      targetMonth.scrollIntoView({ block: "start" })
    }
  }, [selectedRange, autoScrollEnabled])

  function handleSelectWrapper(
    dateRange: DateRange | undefined,
    selectedDay: Date
  ) {
    setAutoScrollEnabled(false)
    handleOnSelect(dateRange, selectedDay)
  }

  // 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} ref={monthsRef}>
      <header className={styles.header}>
        <button className={styles.close} onClick={close} type="button">
          <MaterialIcon icon="close" />
        </button>
      </header>
      <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,
          range_end: styles.rangeEnd,
          range_middle: styles.rangeMiddle,
          range_start: styles.rangeStart,
          root: `${classNames.root} ${styles.root}`,
          week: styles.week,
          weekday: `${classNames.weekday} ${styles.weekDay}`,
        }}
        disabled={[
          { from: startOfCurrentMonth, to: yesterday },
          { from: endDate, to: endOfLastMonth },
        ]}
        endMonth={endDate}
        excludeDisabled
        formatters={{
          formatWeekdayName(weekday) {
            return dt(weekday).locale(lang).format("ddd")
          },
        }}
        hideNavigation
        lang={lang}
        locale={locale}
        mode="range"
        /** Showing full year or what's left of it */
        numberOfMonths={13}
        onSelect={(dateRange, selectedDay) =>
          handleSelectWrapper(dateRange, selectedDay)
        }
        required
        selected={selectedRange}
        startMonth={currentDate}
        weekStartsOn={1}
        components={{
          MonthCaption(props) {
            return (
              <div className={props.className}>
                <Typography variant="Title/Subtitle/md">
                  <h3>{props.children}</h3>
                </Typography>
              </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>
  )
}