"use client";
import { Input } from "~/components/ui/input";
import { addCountry } from "~/server/actions/addCountry";
import SubmitButton from "../SubmitButton";
import { useFormState } from "react-dom";
import { useEffect, useRef } from "react";
import clsx from "clsx";
import { Check, CircleX } from "lucide-react";

export default function CreateCountryForm() {
  const [formState, formAction] = useFormState(addCountry, {
    message: "",
    errors: undefined,
    fieldValues: {
      name: "",
    },
  });
  const formRef = useRef<HTMLFormElement>(null);
  useEffect(() => {
    if (formState.message === "success") {
      formRef.current?.reset();
    }
  }, [formState.message]);
  return (
    <form ref={formRef} action={formAction} className="flex flex-col gap-2">
      <div className="flex max-w-3xl items-center gap-2">
        <Input
          name="name"
          id="name"
          className={clsx({ "border-red-500": formState.errors?.name })}
        />
        {formState.message !== "" && !formState.errors?.name ? (
          <Check className="text-green-500" />
        ) : (
          ""
        )}
        {formState.errors?.name ? (
          <div className="flex min-w-96 items-center gap-1 text-red-500">
            <CircleX />
            <span className="text-sm">{formState.errors?.name}</span>
          </div>
        ) : (
          ""
        )}
      </div>
      <SubmitButton text={"Country"} />
    </form>
  );
}