import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"

import { translateWellnessType } from "../../../utils"
import SidePeekImages from "../../Images"
import { translateWellnessDetails } from "./utils"

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

import {
  ExternalGymDetails,
  HealthFacilitiesEnum,
} from "@/types/components/hotelPage/facilities"
import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"

export default async function Facility({ data }: FacilityProps) {
  const intl = await getIntl()
  const image = data.content.images[0]
  const ordinaryOpeningTimes = data.openingDetails.openingHours.ordinary
  const weekendOpeningTimes = data.openingDetails.openingHours.weekends
  const shortDescription = data.content.texts.descriptions?.short
  const isExternalGym =
    data.type === HealthFacilitiesEnum.Gym &&
    data.details.find((d) => d.name === ExternalGymDetails.ExternalGym)
      ?.value === "True"

  const details = await translateWellnessDetails({
    details: data.details,
    type: data.type,
  })

  return (
    <div className={styles.content}>
      {image ? <SidePeekImages images={[image]} /> : null}
      <div className={styles.information}>
        <Typography variant="Title/Subtitle/lg" className={styles.title}>
          <h3>{translateWellnessType(data.type, intl)}</h3>
        </Typography>
        {details && (
          <Typography variant="Body/Paragraph/mdRegular">
            <ul className={styles.heartList}>
              {details.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </Typography>
        )}
        {isExternalGym ? null : (
          <div className={styles.openingHoursContainer}>
            <Typography variant="Title/Subtitle/md">
              <h4>
                {intl.formatMessage({
                  defaultMessage: "Opening hours",
                })}
              </h4>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <div className={styles.openingHours}>
                <p>
                  {ordinaryOpeningTimes.alwaysOpen
                    ? intl.formatMessage({
                        defaultMessage: "Monday–Friday: Always open",
                      })
                    : intl.formatMessage(
                        {
                          defaultMessage:
                            "Monday–Friday: {openingTime}–{closingTime}",
                        },
                        {
                          openingTime: ordinaryOpeningTimes.openingTime,
                          closingTime: ordinaryOpeningTimes.closingTime,
                        }
                      )}
                </p>
                <p>
                  {weekendOpeningTimes.alwaysOpen
                    ? intl.formatMessage({
                        defaultMessage: "Saturday–Sunday: Always open",
                      })
                    : intl.formatMessage(
                        {
                          defaultMessage:
                            "Saturday–Sunday: {openingTime}–{closingTime}",
                        },
                        {
                          openingTime: weekendOpeningTimes.openingTime,
                          closingTime: weekendOpeningTimes.closingTime,
                        }
                      )}
                </p>
              </div>
            </Typography>
          </div>
        )}
        {shortDescription ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{shortDescription}</p>
          </Typography>
        ) : null}
      </div>
    </div>
  )
}
