"use client"

import { useIntl } from "react-intl"

import { Divider } from "../../Divider"
import { Typography } from "../../Typography"

import { getGroupedOpeningHours } from "../utils"

import styles from "../openingHours.module.css"
import type { AlternateOpeningHours } from "../openingHoursTypes"

interface AlternateOpeningHoursProps {
  alternateOpeningHours: AlternateOpeningHours
}

export default function AlternateOpeningHours({
  alternateOpeningHours,
}: AlternateOpeningHoursProps) {
  const intl = useIntl()
  const groupedAlternateOpeningHours = alternateOpeningHours
    ? getGroupedOpeningHours(alternateOpeningHours, intl)
    : null

  // If there are alternate hours but no grouped hours with length, we return the name of the alternate hours
  if (!groupedAlternateOpeningHours?.length) {
    return (
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p className={styles.caption}>{alternateOpeningHours.name}</p>
      </Typography>
    )
  }

  return (
    <>
      <Divider />
      <Typography variant="Body/Paragraph/mdBold">
        <h5 className={styles.heading}>
          {intl.formatMessage(
            {
              id: "openingHours.alternateOpeningHours",
              defaultMessage: "Alternate opening hours ({name})",
            },
            { name: alternateOpeningHours.name }
          )}
        </h5>
      </Typography>
      <Typography variant="Body/Paragraph/mdRegular">
        <div className={styles.text}>
          {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
            <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
          ))}
        </div>
      </Typography>
    </>
  )
}