"use client"
import { Text, TextField } from "react-aria-components"
import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

import { CheckIcon, CloseIcon } from "@/components/Icons"
import Error from "@/components/TempDesignSystem/Form/ErrorMessage/Error"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import { type IconProps, Key, type NewPasswordProps } from "./newPassword"

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

export default function NewPassword({
  "aria-label": ariaLabel,
  disabled = false,
  placeholder = "",
  registerOptions = {},
}: NewPasswordProps) {
  const { control } = useFormContext()
  const { formatMessage } = useIntl()
  return (
    <Controller
      disabled={disabled}
      control={control}
      name="newPassword"
      rules={registerOptions}
      render={({ field, fieldState }) => {
        const messages = (fieldState.error?.message?.split(",") ?? []) as Key[]
        return (
          <TextField
            aria-label={ariaLabel}
            isDisabled={field.disabled}
            isInvalid={fieldState.invalid}
            isRequired={!!registerOptions.required}
            name={field.name}
            onBlur={field.onBlur}
            onChange={field.onChange}
            validationBehavior="aria"
            value={field.value}
            type="password"
          >
            <AriaInputWithLabel
              {...field}
              aria-labelledby={field.name}
              id={field.name}
              label={formatMessage({ id: "New password" })}
              placeholder={placeholder}
              type="password"
            />
            {field.value ? (
              <div className={styles.errors}>
                <Caption asChild color="black">
                  <Text className={styles.helpText} slot="description">
                    <Icon matcher={Key.CHAR_LENGTH} messages={messages} />
                    10 {formatMessage({ id: "to" })} 40{" "}
                    {formatMessage({ id: "characters" })}
                  </Text>
                </Caption>
                <Caption asChild color="black">
                  <Text className={styles.helpText} slot="description">
                    <Icon matcher={Key.UPPERCASE} messages={messages} />1{" "}
                    {formatMessage({ id: "uppercase letter" })}
                  </Text>
                </Caption>
                <Caption asChild color="black">
                  <Text className={styles.helpText} slot="description">
                    <Icon matcher={Key.NUM} messages={messages} />1{" "}
                    {formatMessage({ id: "number" })}
                  </Text>
                </Caption>
                <Caption asChild color="black">
                  <Text className={styles.helpText} slot="description">
                    <Icon matcher={Key.SPECIAL_CHAR} messages={messages} />1{" "}
                    {formatMessage({ id: "special character" })}
                  </Text>
                </Caption>
              </div>
            ) : null}
            {!field.value && fieldState.error ? (
              <Error>
                <Text className={styles.helpText} slot="description">
                  {fieldState.error.message}
                </Text>
              </Error>
            ) : null}
          </TextField>
        )
      }}
    />
  )
}

function Icon({ matcher, messages }: IconProps) {
  return messages.includes(matcher) ? (
    <CloseIcon color="red" height={20} width={20} />
  ) : (
    <CheckIcon color="green" height={20} width={20} />
  )
}