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

import { MeasureIcon, PersonIcon } from "@/components/Icons"
import Image from "@/components/Image"

import Divider from "../Divider"
import ShowMoreButton from "../ShowMoreButton"
import Caption from "../Text/Caption"
import Subtitle from "../Text/Subtitle"
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.map((seating) => {
    return seating.capacity
  })

  const maxSeatings = Math.max(...roomSeatings)
  const image = room.content.images[0]

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

  return (
    <article className={styles.card}>
      <Image
        src={image.imageSizes.small}
        alt={image.metaData.altText || image.metaData.altText_En || ""}
        className={styles.image}
        width={200}
        height={200}
      />
      <div className={styles.content}>
        <Subtitle textAlign="left" type="two" color="black">
          {room.name}
        </Subtitle>
        <div className={styles.capacity}>
          <div className={styles.iconText}>
            <MeasureIcon color="uiTextPlaceholder" />
            <Caption color="uiTextPlaceholder">{room.size} m2</Caption>
          </div>
          <div className={styles.iconText}>
            <PersonIcon color="uiTextPlaceholder" width={16} height={16} />
            <Caption color="uiTextPlaceholder">
              {intl.formatMessage(
                { id: "max {seatings} pers" },
                { seatings: maxSeatings }
              )}
            </Caption>
          </div>
        </div>
        {opened && (
          <div className={styles.openedInfo}>
            <div className={styles.rowItem}>
              {room.seatings.map((seating, idx) => (
                <div
                  key={seating.type}
                  className={styles.capacity}
                  id={String(seating.capacity) + seating.type + idx}
                >
                  <Caption color="uiTextMediumContrast">
                    {translateSeatingType(seating.type, intl)}
                  </Caption>
                  <Caption color="uiTextHighContrast">
                    {intl.formatMessage(
                      { id: "{number} people" },
                      { number: seating.capacity }
                    )}
                  </Caption>
                </div>
              ))}
            </div>
            <Divider color="baseSurfaceSubtleNormal" />
            <div className={styles.rowItem}>
              <div className={styles.capacity}>
                <Caption color="uiTextMediumContrast">
                  {intl.formatMessage({
                    id: "Location in hotel",
                  })}
                </Caption>
                <Caption color="uiTextHighContrast">
                  {intl.formatMessage(
                    { id: "Floor {floorNumber}" },
                    {
                      floorNumber: `${room.floorNumber}`,
                    }
                  )}
                </Caption>
              </div>
              <div className={styles.capacity}>
                <Caption color="uiTextMediumContrast">
                  {intl.formatMessage({
                    id: "Lighting",
                  })}
                </Caption>
                <Caption color="uiTextHighContrast">
                  {translateRoomLighting(room.lighting, intl)}
                </Caption>
              </div>
              {room.doorHeight && room.doorWidth ? (
                <div className={styles.capacity}>
                  <Caption color="uiTextMediumContrast">
                    {intl.formatMessage({
                      id: "Access size",
                    })}
                  </Caption>
                  <Caption color="uiTextHighContrast">
                    {room.doorHeight} x {room.doorWidth} m
                  </Caption>
                </div>
              ) : null}
              {room.length && room.width && room.height ? (
                <div className={styles.capacity}>
                  <Caption color="uiTextMediumContrast">
                    {intl.formatMessage({
                      id: "Dimensions",
                    })}
                  </Caption>
                  <Caption color="uiTextHighContrast">
                    {room.length} x {room.width} x {room.height} m
                  </Caption>
                </div>
              ) : null}
            </div>
          </div>
        )}
        <ShowMoreButton
          intent="secondary"
          loadMoreData={handleShowMore}
          showLess={opened}
        />
      </div>
    </article>
  )
}
