"use client"
import "react-international-phone/style.css"

import { useEffect, useMemo } from "react"
import { TextField } from "react-aria-components"
import { useFormContext, useWatch } from "react-hook-form"
import {
  buildCountryData,
  CountrySelector,
  defaultCountries,
  DialCodePreview,
  parseCountry,
  type ParsedCountry,
  usePhoneInput,
} from "react-international-phone"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import { Label } from "@scandic-hotels/design-system/Label"

import { getDefaultCountryFromLang } from "@/constants/languages"

import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"

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

import type { PhoneProps } from "@/types/components/form/phone"

export default function Phone({
  ariaLabel = "Phone number input",
  className = "",
  countrySelectorName = "phoneNumberCC",
  disabled = false,
  label,
  name = "phoneNumber",
  placeholder,
  readOnly = false,
  registerOptions = {
    required: true,
  },
}: PhoneProps) {
  const intl = useIntl()
  const lang = useLang()

  const countries = useMemo(() => {
    return defaultCountries.map((dc) => {
      const country = parseCountry(dc)
      const translatedCountryName = intl.formatDisplayName(
        country.iso2.toUpperCase(),
        { type: "region" }
      )
      if (translatedCountryName) {
        country.name = translatedCountryName
      }
      return buildCountryData(country)
    })
  }, [intl])

  const { formState, getFieldState, register, setValue } = useFormContext()
  const fieldState = getFieldState(name)
  const ccFieldState = getFieldState(countrySelectorName)
  const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({
    name: [name, countrySelectorName],
  })

  const { country, setCountry } = usePhoneInput({
    countries,
    defaultCountry: phoneNumberCC
      ? phoneNumberCC
      : getDefaultCountryFromLang(lang),
  })

  function handleSelectCountry(value: ParsedCountry) {
    setCountry(value.iso2)
    setValue(countrySelectorName, value.iso2, {
      shouldDirty: true,
      shouldTouch: true,
      shouldValidate: true,
    })
    if (registerOptions.onBlur) {
      registerOptions.onBlur(value)
    }
  }
  useEffect(() => {
    if (!ccFieldState.isTouched) {
      setCountry(phoneNumberCC)
    }
  }, [phoneNumberCC, setCountry, ccFieldState])
  return (
    <div className={`${styles.phone} ${className}`}>
      <CountrySelector
        countries={countries}
        disabled={readOnly}
        dropdownArrowClassName={styles.arrow}
        flagClassName={styles.flag}
        onSelect={handleSelectCountry}
        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
        selectedCountry={country.iso2}
        renderButtonWrapper={(props) => (
          <button
            {...props.rootProps}
            className={styles.select}
            tabIndex={0}
            type="button"
            data-testid="country-selector"
          >
            <Label required={!!registerOptions.required} size="small">
              {intl.formatMessage({
                defaultMessage: "Country code",
              })}
            </Label>
            <span className={styles.selectContainer}>
              {props.children}
              <Body asChild fontOnly>
                <DialCodePreview
                  className={styles.dialCode}
                  dialCode={country.dialCode}
                  prefix="+"
                />
              </Body>
              <MaterialIcon
                icon="keyboard_arrow_down"
                className={styles.chevron}
                color="Icon/Default"
                size={18}
              />
            </span>
          </button>
        )}
      />
      <TextField
        aria-label={ariaLabel}
        isDisabled={disabled || registerOptions.disabled}
        isInvalid={fieldState.invalid}
        isRequired={!!registerOptions?.required}
        isReadOnly={readOnly}
        name={name}
        type="tel"
        value={phoneNumber}
      >
        <Input
          {...register(name, registerOptions)}
          autoComplete="tel-national"
          label={label}
          placeholder={placeholder}
          readOnly={readOnly}
          type="tel"
        />
        <ErrorMessage errors={formState.errors} name={name} />
      </TextField>
    </div>
  )
}
