/* eslint-disable no-nested-ternary */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import { X } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { useForm } from "react-hook-form";

import Form from "@/components/form/form";
import FormItem from "@/components/form/form-item";
import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import { PasswordInput } from "@/components/ui/password-input/password-input";
import { cn } from "@/libs/utils";

interface FormType {
  newPassword: string;
  newPasswordAgain: string;
}
interface PasswordMessage {
  minLetter: boolean | null;
  maxLetter: boolean | null;
  carecter: boolean | null;
  minNumber: boolean | null;
}

interface NewPasswordFormProps {
  onSubmit: (variables: FormType) => void;
  onChange?: (variables: FormType) => void;
  onClose?: () => void;
  validations: {
    password: any;
  };
  className?: string;
  profileNewPassword?: boolean;
}

const NewPasswordForm = (props: NewPasswordFormProps) => {
  const { profileNewPassword = false } = props;
  const form = useForm<FormType>({ mode: "onChange" });
  const [passwordMessage, setPasswordMessage] = useState<PasswordMessage>({
    minLetter: null,
    maxLetter: null,
    carecter: null,
    minNumber: null,
  });
  async function handleSubmit(params: FormType) {
    props.onSubmit(params);
  }

  const validetePassword = (value: string) => {
    if (!value || value.length === 0) return true;
    const minLetter = /^\S{8,}$/.test(value);
    const minNumber = /.*\d.*/.test(value);
    const carecter = /.*[!@#$%^&*(),.?":{}|<>].*/.test(value);
    const maxLetter = /.*[a-z].*[A-Z].*|.*[A-Z].*[a-z].*/.test(value);
    if (!minLetter) {
      setPasswordMessage({
        ...passwordMessage,
        minLetter,
        maxLetter,
        carecter,
        minNumber,
      });
      return "Minumum bir küçük karekter kullanmalısınız";
    }

    if (!maxLetter) {
      setPasswordMessage({
        ...passwordMessage,
        minLetter,
        maxLetter,
        carecter,
        minNumber,
      });
      return "Minimum bir büyük karekter kullanmalısınız";
    }
    if (!carecter) {
      setPasswordMessage({
        ...passwordMessage,
        minLetter,
        maxLetter,
        carecter,
        minNumber,
      });
      return "Minimim bir sembol karakter kullanmalısınız";
    }
    if (!minNumber) {
      setPasswordMessage({
        ...passwordMessage,
        minLetter,
        maxLetter,
        carecter,
        minNumber,
      });
      return "Minimum bir sayı kullanmalısınız";
    }
    setPasswordMessage({
      ...passwordMessage,
      minLetter,
      maxLetter,
      carecter,
      minNumber,
    });
    return true;
  };

  function passwordsMatch() {
    if (form.getValues("newPassword") !== form.getValues("newPasswordAgain")) {
      return "Şifreler eşleşmiyor. Lütfen aynı şifreyi giriniz.";
    }
    return true;
  }

  function getClassName(value: boolean | null) {
    if (value === null) {
      return "text-gray-400";
    }
    if (value) {
      return "text-success-500";
    }
    return "text-red-500";
  }

  return (
    <Card
      className={cn(
        "flex min-w-[392px] flex-col gap-6 bg-white p-5 shadow-2xl",
        props.className,
      )}
    >
      <div className="flex flex-col">
        <span className="flex justify-between text-2xl font-semibold text-[#1D2939]">
          Yeni Şifre
          {profileNewPassword && (
            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
            <span
              className="cursor-pointer rounded-lg border border-gray-300 p-[6px]"
              onClick={props.onClose}
            >
              <X className="size-5" />
            </span>
          )}
        </span>
        <span className="text-base text-gray-500">
          Yeni bir şifre belirleyin
        </span>
      </div>

      <Form
        methods={form}
        // eslint-disable-next-line react/jsx-no-bind
        onSubmit={handleSubmit}
      >
        <div className="flex flex-col gap-6">
          <div className="flex flex-col gap-2">
            <FormItem name="newPassword">
              {({ field, setValue }) => (
                <PasswordInput
                  {...field}
                  innerRef={
                    field.ref as unknown as React.RefObject<HTMLInputElement>
                  }
                  fullWidth
                  label="Yeni Şifre*"
                  size="md"
                  onChange={(e) => {
                    validetePassword(e.target.value);
                    if (e.target.value.length > 0) {
                      setValue(e.target.value);
                    }
                  }}
                  isInvalid={
                    passwordMessage.minLetter !== null
                      ? !passwordMessage.minLetter ||
                        !passwordMessage.maxLetter ||
                        !passwordMessage.carecter ||
                        !passwordMessage.minNumber
                      : false
                  }
                />
              )}
            </FormItem>
            <div className="text-xs text-gray-400">
              <p className={cn(getClassName(passwordMessage.minLetter))}>
                *Minimum 8 karakter
              </p>
              <p className={cn(getClassName(passwordMessage.minNumber))}>
                *Minimum bir adet rakam
              </p>
              <p className={cn(getClassName(passwordMessage.carecter))}>
                *Minimum bir adet sembol
              </p>
              <p className={cn(getClassName(passwordMessage.maxLetter))}>
                *Büyük ve küçük harf
              </p>
            </div>
          </div>

          <FormItem
            name="newPasswordAgain"
            rules={{ validate: () => passwordsMatch() }}
          >
            {({ field, fieldState }) => (
              <PasswordInput
                {...field}
                innerRef={
                  field.ref as unknown as React.RefObject<HTMLInputElement>
                }
                fullWidth
                label="Yeni Şifre Tekrar*"
                size="md"
                isInvalid={!!fieldState.error}
                errorMessage={fieldState.error?.message}
              />
            )}
          </FormItem>
          <Button type="submit" className="w-full" variant="primary">
            Değiştir
          </Button>
          {profileNewPassword && (
            <Link href="/auth/forgot-password">
              <Button type="submit" className="w-full" variant="link">
                Şifremi Unuttum
              </Button>
            </Link>
          )}
        </div>
      </Form>
    </Card>
  );
};

export { NewPasswordForm };