/* eslint-disable formatjs/no-literal-string-in-jsx */
"use client"

import { useIntl } from "react-intl"

import { dt } from "@scandic-hotels/common/dt"
import { IconButton } from "@scandic-hotels/design-system/IconButton" // client only
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { compareAllLevels, faq } from "@/constants/webHrefs"

import useLang from "@/hooks/useLang"

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

type LevelProgressModalProps = {
  color: string | null
  tierExpires: string | null
}

export default function LevelProgressModal({
  color,
  tierExpires,
}: LevelProgressModalProps) {
  const intl = useIntl()
  const lang = useLang()

  // calculate tierStarts by tierExpires
  let tierStarts: string | null = null

  if (tierExpires) {
    const date = new Date(tierExpires)
    date.setFullYear(date.getFullYear() - 1)
    tierStarts = date.toISOString().split("T")[0]
  }

  return (
    <Modal
      className={styles.dialog}
      trigger={
        <IconButton theme={"Black"}>
          <MaterialIcon
            className={styles.infoButton}
            icon="info"
            color={
              color === "Surface/Brand/Primary 1/OnSurface/Default"
                ? "Icon/Inverted"
                : "Icon/Interactive/Default"
            }
          />
        </IconButton>
      }
    >
      <div className={styles.levelProgressModal}>
        <Typography variant="Title/Subtitle/lg">
          <h2 id="level-progress-modal-title" className={styles.title}>
            {intl.formatMessage({
              id: "myPages.yourMemberYearAndLevelProgress",
              defaultMessage: "Your member year and level progress",
            })}
          </h2>
        </Typography>
        <span>
          <Typography variant="Body/Paragraph/mdBold">
            <h3 id="level-progress-modal-subtitle">
              {intl.formatMessage({
                id: "myPages.currentMemberYear",
                defaultMessage: "Current member year",
              })}
            </h3>
          </Typography>
          <div>
            <Typography variant="Body/Paragraph/mdRegular">
              <span className={styles.dates}>
                <time id="level-progress-modal-start-date">
                  {dt(tierStarts).locale(lang).format("MMM, YYYY")}
                </time>
                →
                <time id="level-progress-modal-end-date">
                  {dt(tierExpires).locale(lang).format("MMM D, YYYY")}
                </time>
              </span>
            </Typography>
          </div>
        </span>
        <Typography variant="Body/Paragraph/mdRegular">
          <p id="level-progress-modal-text">
            {intl.formatMessage({
              id: "myPages.pointsYouEarnDetermineYourLevel",
              defaultMessage:
                "The points you earn this year determine your level for both this and the next member year.",
            })}
          </p>
        </Typography>
        <Link
          size="large"
          href={compareAllLevels[lang]}
          color="Text/Interactive/Secondary"
          className={styles.link}
          textDecoration="underline"
        >
          {intl.formatMessage({
            id: "myPages.compareAllLevels",
            defaultMessage: "Compare all levels",
          })}
          <MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
        </Link>
        <Link
          size="large"
          href={faq[lang]}
          color="Text/Interactive/Secondary"
          className={styles.link}
          textDecoration="underline"
        >
          {intl.formatMessage({
            id: "common.scandicFriendsFaq",
            defaultMessage: "Scandic Friends FAQ",
          })}
          <MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
        </Link>
      </div>
    </Modal>
  )
}