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

import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import Image from "@/components/Image"

import ShowMoreButton from "../ShowMoreButton"
import Body from "../Text/Body"
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.at(0)

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

  return (
    <article className={styles.card}>
      <Image
        src={image?.imageSizes.small || fallbackImage}
        alt={image?.metaData.altText || image?.metaData.altText_En || ""}
        className={styles.image}
        width={386}
        height={200}
        sizes="(min-width: 768px) 386px, 100vw"
      />
      <div className={styles.content}>
        <Subtitle textAlign="left" type="two" color="black">
          {room.name}
        </Subtitle>
        <div className={styles.capacity}>
          <div className={styles.iconText}>
            <MaterialIcon
              icon="straighten"
              color="Icon/Interactive/Placeholder"
            />
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <Caption color="uiTextPlaceholder">{room.size} m²</Caption>
          </div>
          <div className={styles.iconText}>
            <MaterialIcon
              icon="person"
              color="Icon/Interactive/Placeholder"
              size={16}
            />
            <Caption color="uiTextPlaceholder">
              {intl.formatMessage(
                {
                  defaultMessage: "max {seatings} pers",
                },
                { seatings: maxSeatings }
              )}
            </Caption>
          </div>
        </div>
        {room.content.texts.descriptions.medium ? (
          <Body color="uiTextHighContrast">
            {room.content.texts.descriptions.medium}
          </Body>
        ) : null}
        {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(
                      {
                        defaultMessage: "{number} people",
                      },
                      { number: seating.capacity }
                    )}
                  </Caption>
                </div>
              ))}
            </div>
            <Divider color="Border/Divider/Subtle" />
            <div className={styles.rowItem}>
              <div className={styles.capacity}>
                <Caption color="uiTextMediumContrast">
                  {intl.formatMessage({
                    defaultMessage: "Location in hotel",
                  })}
                </Caption>
                <Caption color="uiTextHighContrast">
                  {intl.formatMessage(
                    {
                      defaultMessage: "Floor {floorNumber}",
                    },
                    {
                      floorNumber: `${room.floorNumber}`,
                    }
                  )}
                </Caption>
              </div>
              <div className={styles.capacity}>
                <Caption color="uiTextMediumContrast">
                  {intl.formatMessage({
                    defaultMessage: "Lighting",
                  })}
                </Caption>
                <Caption color="uiTextHighContrast">
                  {translateRoomLighting(room.lighting, intl)}
                </Caption>
              </div>
              {room.doorHeight && room.doorWidth ? (
                <div className={styles.capacity}>
                  <Caption color="uiTextMediumContrast">
                    {intl.formatMessage({
                      defaultMessage: "Access size",
                    })}
                  </Caption>
                  <Caption color="uiTextHighContrast">
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {room.doorHeight} x {room.doorWidth} m
                  </Caption>
                </div>
              ) : null}
              {room.length && room.width && room.height ? (
                <div className={styles.capacity}>
                  <Caption color="uiTextMediumContrast">
                    {intl.formatMessage({
                      defaultMessage: "Dimensions",
                    })}
                  </Caption>
                  <Caption color="uiTextHighContrast">
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {room.length} x {room.width} x {room.height} m
                  </Caption>
                </div>
              ) : null}
            </div>
          </div>
        )}
        <ShowMoreButton
          intent="secondary"
          loadMoreData={handleShowMore}
          showLess={opened}
        />
      </div>
    </article>
  )
}

const fallbackImage =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
