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

import { ChevronDownIcon } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
import TextArea from "@/components/TempDesignSystem/Form/TextArea"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

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

export default function SpecialRequests() {
  const [isOpen, setIsOpen] = useState(false)
  const intl = useIntl()

  function toggleRequests() {
    setIsOpen((prevVal) => !prevVal)
  }

  return (
    <div className={styles.requests} data-requests-open={isOpen}>
      <button className={styles.toggle} onClick={toggleRequests} type="button">
        <Footnote
          color="uiTextHighContrast"
          textTransform="uppercase"
          type="label"
          className={styles.header}
          textAlign="left"
        >
          {intl.formatMessage({ id: "Special requests" })}
        </Footnote>
        <ChevronDownIcon className={styles.chevron} />
        <Divider className={styles.divider} color="subtle" />
      </button>
      <div className={styles.content}>
        <div className={styles.contentWrapper}>
          {/*

          TODO: Hiding because API is not ready for this yet (https://scandichotels.atlassian.net/browse/SW-1497). Add back in when API is ready.

          <Select
            label={intl.formatMessage({ id: "Floor preference" })}
            name="specialRequests.floorPreference"
            items={[
              noPreferenceItem,
              {
                value: FloorPreference.HIGH,
                label: intl.formatMessage({ id: "High floor" }),
              },
              {
                value: FloorPreference.LOW,
                label: intl.formatMessage({ id: "Low floor" }),
              },
            ]}
          />
          <Select
            label={intl.formatMessage({ id: "Elevator preference" })}
            name="specialRequests.elevatorPreference"
            items={[
              noPreferenceItem,
              {
                value: ElevatorPreference.AWAY_FROM_ELEVATOR,
                label: intl.formatMessage({
                  id: "Away from elevator",
                }),
              },
              {
                value: ElevatorPreference.NEAR_ELEVATOR,
                label: intl.formatMessage({
                  id: "Near elevator",
                }),
              },
            ]}
            /> */}
          <TextArea
            label={intl.formatMessage({
              id: "Is there anything else you would like us to know before your arrival?",
            })}
            name="specialRequests.comments"
          />
        </div>
      </div>
    </div>
  )
}