"use client"
import { useIntl } from "react-intl"

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

import { shortDateFormat } from "@/constants/dateFormats"
import { useMyStayStore } from "@/stores/my-stay"

import useLang from "@/hooks/useLang"

import styles from "./dates.module.css"

export default function Dates() {
  const intl = useIntl()
  const lang = useLang()
  const { checkInDate, checkOutDate } = useMyStayStore((state) => ({
    checkInDate: state.bookedRoom.checkInDate,
    checkOutDate: state.bookedRoom.checkOutDate,
  }))

  const from = dt(checkInDate).locale(lang).format(shortDateFormat[lang])
  const fromYear = dt(checkInDate).year()
  const to = dt(checkOutDate).locale(lang).format(shortDateFormat[lang])
  const toYear = dt(checkOutDate).year()

  const isSameYear = fromYear === toYear

  const stayFrom = isSameYear ? from : `${from}, ${fromYear}`
  const stayTo = `${to}, ${toYear}`

  return (
    <div className={styles.row}>
      <div className={styles.label}>
        <MaterialIcon icon="calendar_month" />
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.textDefault}>
            {intl.formatMessage({
              defaultMessage: "Dates",
            })}
          </p>
        </Typography>
      </div>

      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.textDefault}>
          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
          {stayFrom} → {stayTo}
        </p>
      </Typography>
    </div>
  )
}