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

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

import { useMyStayStore } from "@/stores/my-stay"

import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"

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

import type { Room } from "@/types/stores/my-stay"

export default function Multiroom() {
  const intl = useIntl()
  const rooms = useMyStayStore((state) => state.rooms)
  const notCancelableRooms = rooms.filter((r) => !r.isCancelable)
  const cancelableRooms = rooms.filter((r) => !r.isCancelled && r.isCancelable)
  const isSingleRoom = rooms.length === 1

  if (isSingleRoom) {
    return null
  }

  const myRooms = intl.formatMessage({ defaultMessage: "My rooms" })
  const selectRoom = intl.formatMessage({
    defaultMessage: "Select room",
  })
  const cannotBeCancelled = intl.formatMessage({
    defaultMessage: "Cannot be cancelled",
  })

  if (notCancelableRooms.length) {
    return (
      <div className={styles.wrapper}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <p>
            {intl.formatMessage({
              defaultMessage: "This stay has multiple terms.",
            })}
          </p>
        </Typography>
        <div className={styles.container}>
          <List rooms={cancelableRooms} title={selectRoom} />
          <List disabled rooms={notCancelableRooms} title={cannotBeCancelled} />
        </div>
      </div>
    )
  }

  return <List rooms={cancelableRooms} title={myRooms} />
}

interface ListProps {
  disabled?: boolean
  rooms: Room[]
  title: string
}

function List({ disabled = false, rooms, title }: ListProps) {
  const intl = useIntl()
  const refMsg = intl.formatMessage({ defaultMessage: "Ref" })
  return (
    <div className={styles.rooms}>
      <Typography variant="Title/Overline/sm">
        <p>{title}</p>
      </Typography>

      <ul className={styles.list}>
        {rooms.map((room) => {
          const roomNumber = room.roomNumber
          return (
            <li key={room.confirmationNumber}>
              <Checkbox
                className={styles.checkbox}
                name={`rooms.${roomNumber - 1}.checked`}
                registerOptions={{ disabled }}
              >
                <div className={styles.room}>
                  <div className={styles.chip}>
                    <Typography variant="Tag/sm">
                      <p className={styles.chipText}>
                        {intl.formatMessage(
                          {
                            defaultMessage: "Room {roomIndex}",
                          },
                          {
                            roomIndex: roomNumber,
                          }
                        )}
                      </p>
                    </Typography>
                  </div>
                  <Typography variant="Title/Subtitle/md">
                    <p>{room.roomName}</p>
                  </Typography>
                  <Typography variant="Body/Paragraph/mdRegular">
                    {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                    <p>
                      <strong>{refMsg}:</strong> {room.confirmationNumber}
                    </p>
                  </Typography>
                </div>
              </Checkbox>
            </li>
          )
        })}
      </ul>
    </div>
  )
}
