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

import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
import { Typography } from "@scandic-hotels/design-system/Typography"

import ShowMoreButton from "../ShowMoreButton"
import { translateRoomLighting, translateSeatingType } from "./utils"

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

import type { MeetingRoom } from "@/types/components/hotelPage/meetingRooms"

interface MeetingRoomCardProps {
  room: MeetingRoom
}
export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
  const intl = useIntl()
  const [opened, setOpened] = useState(false)

  const roomSeatings = room.seatings
    .filter(({ capacity }) => !!capacity)
    .map(({ capacity }) => capacity)
  const maxSeatings = roomSeatings.length ? Math.max(...roomSeatings) : null
  const image = room.content.images.at(0)

  function handleShowMore() {
    setOpened((state) => !state)
  }

  return (
    <article className={styles.card}>
      {image?.src ? (
        <Image
          src={image.src}
          alt={image.altText || image.altText_En || ""}
          className={styles.image}
          width={386}
          height={200}
          sizes="(min-width: 768px) 386px, 100vw"
        />
      ) : (
        <ImageFallback />
      )}
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/lg">
          <h3>{room.name}</h3>
        </Typography>
        <div className={styles.capacity}>
          <div className={styles.iconText}>
            <MaterialIcon
              icon="straighten"
              color="Icon/Interactive/Placeholder"
            />
            <Typography
              variant="Body/Supporting text (caption)/smRegular"
              className={styles.roomDetails}
            >
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              <span>{room.size} m²</span>
            </Typography>
          </div>
          {maxSeatings ? (
            <div className={styles.iconText}>
              <MaterialIcon
                icon="person"
                color="Icon/Interactive/Placeholder"
                size={16}
              />
              <Typography
                variant="Body/Supporting text (caption)/smRegular"
                className={styles.roomDetails}
              >
                <span>
                  {intl.formatMessage(
                    {
                      id: "meetingRoomCard.maxSeatings",
                      defaultMessage: "max {seatings} pers",
                    },
                    { seatings: maxSeatings }
                  )}
                </span>
              </Typography>
            </div>
          ) : null}
        </div>
        {room.content.texts.descriptions.medium ? (
          <Typography>
            <p>{room.content.texts.descriptions.medium}</p>
          </Typography>
        ) : null}
        {opened && (
          <table className={styles.openedInfo}>
            <tbody className={styles.rowItem}>
              {room.seatings.map((seating, idx) => (
                <TableRow
                  key={seating.type}
                  id={String(seating.capacity) + seating.type + idx}
                  name={translateSeatingType(seating.type, intl)}
                  value={intl.formatMessage(
                    {
                      id: "meetingRoomCard.numberOfPeople",
                      defaultMessage: "{number} people",
                    },
                    { number: seating.capacity }
                  )}
                />
              ))}
            </tbody>
            <Divider color="Border/Divider/Subtle" />
            <tbody className={styles.rowItem}>
              <TableRow
                name={intl.formatMessage({
                  id: "meetingRoomCard.locationInHotel",
                  defaultMessage: "Location in hotel",
                })}
                value={intl.formatMessage(
                  {
                    id: "meetingRoomCard.floorNumber",
                    defaultMessage: "Floor {floorNumber}",
                  },
                  {
                    floorNumber: `${room.floorNumber}`,
                  }
                )}
              />
              <TableRow
                name={intl.formatMessage({
                  id: "meetingRoomCard.lighting",
                  defaultMessage: "Lighting",
                })}
                value={translateRoomLighting(room.lighting, intl)}
              />
              {room.doorHeight && room.doorWidth ? (
                <TableRow
                  name={intl.formatMessage({
                    id: "meetingRoomCard.accessSize",
                    defaultMessage: "Access size",
                  })}
                  value={`${room.doorHeight} x ${room.doorWidth} m`}
                />
              ) : null}
              {room.length && room.width && room.height ? (
                <TableRow
                  name={intl.formatMessage({
                    id: "meetingRoomCard.dimensions",
                    defaultMessage: "Dimensions",
                  })}
                  value={`${room.length} x ${room.width} x ${room.height} m`}
                />
              ) : null}
            </tbody>
          </table>
        )}
        <ShowMoreButton
          variant="Secondary"
          loadMoreData={handleShowMore}
          showLess={opened}
        />
      </div>
    </article>
  )
}

function TableRow({
  name,
  value,
  id,
}: {
  name: string
  value: string
  id?: string
}) {
  return (
    <Typography variant="Body/Supporting text (caption)/smRegular">
      <tr className={styles.capacity} id={id}>
        <th className={styles.leftColumn}>{name}</th>
        <td>{value}</td>
      </tr>
    </Typography>
  )
}