import { useIntl } from "react-intl"

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

import { generateDeliveryOptions } from "@/components/HotelReservation/MyStay/utils/ancillaries"
import Input from "@/components/TempDesignSystem/Form/Input"
import Select from "@/components/TempDesignSystem/Form/Select"

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

export default function DeliveryMethodStep() {
  const intl = useIntl()
  const deliveryTimeOptions = generateDeliveryOptions()

  return (
    <div className={styles.selectContainer}>
      <div className={styles.select}>
        <Typography variant="Body/Supporting text (caption)/smBold">
          <h3>
            {intl.formatMessage({
              defaultMessage: "Delivered at:",
            })}
          </h3>
        </Typography>
        <Select
          name="deliveryTime"
          label={""}
          items={deliveryTimeOptions}
          registerOptions={{ required: true }}
          isNestedInModal
        />
      </div>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p>
          {intl.formatMessage({
            defaultMessage:
              "All add-ons are delivered at the same time. Changes to delivery times will affect earlier add-ons.",
          })}
        </p>
      </Typography>
      <div className={styles.select}>
        <Input
          label={intl.formatMessage({
            defaultMessage: "Other Requests",
          })}
          name="optionalText"
        />
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <h3>
            {intl.formatMessage({
              defaultMessage: "Optional",
            })}
          </h3>
        </Typography>
      </div>
    </div>
  )
}
