"use client"

import Image from "next/image"
import { useState } from "react"
import { Checkbox as AriaCheckbox } from "react-aria-components"
import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { employeeBenefits } from "@/constants/routes/dtmc"

import ButtonLink from "@/components/ButtonLink"
import useLang from "@/hooks/useLang"

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

export default function LinkEmploymentPage() {
  const lang = useLang()
  const intl = useIntl()
  const [isChecked, setIsChecked] = useState(false)
  const linkMyEmploymentText = intl.formatMessage({
    defaultMessage: "Link my employment",
  })

  return (
    <div className={styles.pageWrapper}>
      <Image
        src="/_static/img/Scandic_Computer_Coffee.png"
        alt=""
        fill
        className={styles.backgroundImage}
        priority
      />

      <div className={styles.contentContainer}>
        <nav className={styles.nav}>
          <ButtonLink href={employeeBenefits[lang]} variant="Text">
            <MaterialIcon
              icon="chevron_left"
              size={20}
              className={styles.backArrow}
            />
            <span className={styles.navBackText}>
              {intl.formatMessage({
                defaultMessage: "Go back",
              })}
            </span>
          </ButtonLink>
          <div className={styles.logoContainer}>
            <ScandicLogoIcon
              color="Icon/Interactive/Accent"
              height="20px"
              width="94px"
            />
          </div>
        </nav>

        <main className={styles.mainContent}>
          <div className={styles.card}>
            <Typography variant="Title/Subtitle/lg">
              <h1 className={styles.heading}>
                {intl.formatMessage({
                  defaultMessage: "Link your employment to access benefits",
                })}
              </h1>
            </Typography>

            <div className={styles.formElements}>
              <div className={styles.checkboxContainer}>
                <AriaCheckbox
                  isSelected={isChecked}
                  onChange={setIsChecked}
                  className={styles.checkboxWrapper}
                >
                  {({ isSelected: isAriaSelected }) => (
                    <>
                      <span className={styles.checkbox}>
                        {isAriaSelected && (
                          <MaterialIcon icon="check" color="Icon/Inverted" />
                        )}
                      </span>
                      <Typography variant="Body/Paragraph/mdRegular">
                        <span>
                          {intl.formatMessage({
                            defaultMessage: "I accept the terms and conditions",
                          })}
                        </span>
                      </Typography>
                    </>
                  )}
                </AriaCheckbox>
                <Typography variant="Body/Paragraph/mdRegular">
                  <p className={styles.termsTextFull}>
                    {intl.formatMessage(
                      {
                        defaultMessage:
                          "By accepting the {termsLink}, I agree to link my employment to access benefits. The connection will remain active during my employment or until I opt out by sending an email to Scandic's customer service.",
                      },
                      {
                        termsLink: (
                          // TODO: Update with actual URL for terms and conditions.
                          <a href={"#"} className={styles.link}>
                            {intl.formatMessage({
                              defaultMessage:
                                "Scandic Family Terms and Conditions",
                            })}
                          </a>
                        ),
                      }
                    )}
                  </p>
                </Typography>
              </div>

              {isChecked ? (
                <ButtonLink
                  href={"#"} // TODO: Udpate with actual URL for linking employment.
                >
                  {linkMyEmploymentText}
                </ButtonLink>
              ) : (
                <Button
                  variant="Primary"
                  typography="Body/Paragraph/mdRegular"
                  isDisabled
                >
                  {linkMyEmploymentText}
                </Button>
              )}
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}