import Link from "next/link";

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 { Checkbox } from "@/components/ui/checkbox/checkbox";
import { Input } from "@/components/ui/input/input";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { PasswordInput } from "@/components/ui/password-input/password-input";

interface FormType {
  email: string;
  password: string;
  rememberMe: boolean;
}

export interface LoginFormProps {
  isLoading?: boolean;
  isSuccess?: boolean;
  onSubmit: (variables: FormType) => void;
  validations: {
    email: any;
    password: any;
  };
  errorMessage?: string;
}

const LoginForm = (props: LoginFormProps) => {
  async function handleSubmit(params: FormType) {
    props.onSubmit(params);
  }

  return (
    <Card className="flex w-[90%] flex-col gap-6 bg-white p-5 shadow-2xl md:w-[512px]  md:min-w-[512px]">
      <div className="flex flex-col gap-2">
        <span className="text-2xl font-semibold text-[#1D2939]">
          Hoşgeldiniz!
        </span>
        <span className="text-base text-gray-500">
          İş seyahatlerinizi planlayın veya yönetin.
        </span>
      </div>
      <Form
        // eslint-disable-next-line react/jsx-no-bind
        onSubmit={handleSubmit}
        defaultValues={{
          email: "",
          password: "",
          rememberMe: false,
        }}
      >
        <div className="flex flex-col gap-6">
          <FormItem name="email" rules={props.validations.email}>
            {({ field, fieldState }) => (
              <Input
                {...field}
                innerRef={
                  field.ref as unknown as React.RefObject<HTMLInputElement>
                }
                fullWidth
                label="Mail adresi*"
                size="lg"
                leftIcon={<LIcon name="Mail" />}
                isInvalid={!!fieldState.error}
                errorMessage={fieldState.error?.message}
              />
            )}
          </FormItem>
          <div className="flex flex-col gap-2">
            <FormItem name="password" rules={props.validations.password}>
              {({ field, fieldState }) => (
                <PasswordInput
                  {...field}
                  innerRef={
                    field.ref as unknown as React.RefObject<HTMLInputElement>
                  }
                  fullWidth
                  label="Şifre*"
                  size="lg"
                  isInvalid={!!fieldState.error}
                  errorMessage={fieldState.error?.message}
                />
              )}
            </FormItem>
            <div className="flex justify-between">
              <FormItem name="rememberMe">
                {({ field }) => (
                  <Checkbox
                    {...field}
                    id={field.name}
                    onCheckedChange={field.onChange}
                    ref={field.ref}
                    variant="primary"
                    label="Beni hatırla"
                    labelTextSize="md"
                    labelClassname="text-gray-500"
                  />
                )}
              </FormItem>
              <Link href="/auth/forgot-password">
                <span className="font-medium text-primary-500">
                  Şifremi Unuttum
                </span>
              </Link>
            </div>
          </div>
          <Button
            loading={props.isLoading}
            type="submit"
            className="w-full"
            variant={props.isSuccess ? "success" : "primary"}
          >
            {props.isSuccess ? <LIcon name="Check" /> : "Giriş Yap"}
          </Button>
        </div>
      </Form>
      {props.errorMessage && (
        <span className="font-semibold text-red-500">{props.errorMessage}</span>
      )}
    </Card>
  );
};

export { LoginForm };