"use client"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import SkeletonShimmer from "@/components/SkeletonShimmer"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"

import BookingCode from "../BookingCode"

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

export default function Voucher() {
  const intl = useIntl()

  const bonus = intl.formatMessage({ id: "Use Bonus Cheque" })
  const reward = intl.formatMessage({ id: "Book Reward Night" })

  // ToDo: Remove this when all three options are enabled
  const disabledBookingOptionsHeader = intl.formatMessage({
    id: "We're sorry",
  })
  const disabledBookingOptionsText = intl.formatMessage({
    id: "Codes, cheques and reward nights aren't available on the new website yet.",
  })

  return (
    <div className={styles.optionsContainer}>
      <div className={styles.vouchers}>
        <BookingCode />
      </div>
      <div className={styles.options}>
        <div className={styles.option}>
          <Tooltip
            heading={disabledBookingOptionsHeader}
            text={disabledBookingOptionsText}
            position="bottom"
            arrow="left"
          >
            <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{bonus}</span>
              </Caption>
            </Checkbox>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </Tooltip>
        </div>
        <div className={styles.option}>
          <Tooltip
            heading={disabledBookingOptionsHeader}
            text={disabledBookingOptionsText}
            position="bottom"
            arrow="left"
          >
            <Checkbox name="useReward" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{reward}</span>
              </Caption>
            </Checkbox>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </Tooltip>
        </div>
      </div>
    </div>
  )
}

export function VoucherSkeleton() {
  const intl = useIntl()

  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
  const bonus = intl.formatMessage({ id: "Use Bonus Cheque" })
  const reward = intl.formatMessage({ id: "Book Reward Night" })

  const form = useForm()

  return (
    <FormProvider {...form}>
      <div className={styles.optionsContainer}>
        <div className={styles.vouchers}>
          <label>
            <Caption type="bold" color="red" asChild>
              <span>{vouchers}</span>
            </Caption>
          </label>
          <SkeletonShimmer width={"100%"} />
        </div>
        <div className={styles.options}>
          <div className={styles.option}>
            <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{bonus}</span>
              </Caption>
            </Checkbox>
          </div>
          <div className={styles.option}>
            <Checkbox name="useReward" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{reward}</span>
              </Caption>
            </Checkbox>
          </div>
        </div>
      </div>
    </FormProvider>
  )
}