"use client";
import {ErrorMessage, Form, FormikProps} from "formik";
import React, {useState} from "react";
import {Field, FieldGroup, FieldLabel} from "@/components/ui/field";
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";
import {Label} from "@/components/ui/label";
import {Checkbox} from "@/components/ui/checkbox";
import Link from "next/link";
import { LoginFormProps, LoginFormValues } from "./LoginForm";
import Loader from "@/components/Loader";

export default function InnerLoginForm(
  props: FormikProps<LoginFormValues> & LoginFormProps
) {
  const isValid = Boolean(
    props.values.username.trim() && props.values.password.trim()
  );

  const [showPassword] = useState(false);

  return (
    <Form className="border border-neutral-200 overflow-hidden" dir="rtl">
      <div className="p-4">
        <FieldGroup dir="rtl">
          <Field>
            <FieldLabel htmlFor="checkout-7j9-card-name-43j">
              نام کاربری
            </FieldLabel>
            <Input
              id="checkout-7j9-card-name-43j"
              placeholder="نام کاربری"
              name="username"
              onChange={(e) => props.setFieldValue("username", e.target.value)}
            />
            <ErrorMessage
              className="text-xs text-red-500"
              component={"div"}
              name="username"
            />
          </Field>
          <Field>
            <FieldLabel htmlFor="checkout-7j9-card-name-44j">
              رمز عبور
            </FieldLabel>
            <Input
              id="checkout-7j9-card-name-44j"
              placeholder="رمز عبور"
              name="password"
              type={showPassword ? "text" : "password"}
              onChange={(e) => props.setFieldValue("password", e.target.value)}
            />
            <ErrorMessage
              className="text-xs text-red-500"
              component={"div"}
              name="password"
            />
          </Field>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Checkbox
                id="terms"
                className="size-5"
                checked={props.values.rememberMe}
                onCheckedChange={() =>
                  props.setFieldValue("rememberMe", !props.values.rememberMe)
                }
              />
              <Label htmlFor="terms">مرا به خاطر بسپار</Label>
            </div>
            <Link href={'/reset-password'} className="w-fit p-0 m-0 text-sm">
              رمز عبور را فراموش کرده ام
            </Link>
          </div>
          <Button variant={"default"} disabled={!isValid} type="submit">
            {props.loginPending ? <Loader size="4"/> : "ورود"}
          </Button>
        </FieldGroup>
      </div>
    </Form>
  );
}
