import {ErrorMessage, Form, FormikProps} from "formik";
import React from "react";
import {
  CreateLanguageFormProps,
  CreateLanguageFormValues,
} from "./CreateLanguageForm";
import {
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {Button} from "@/components/ui/button";
import {Label} from "@/components/ui/label";
import {Input} from "@/components/ui/input";
import {Plus} from "lucide-react";
import Loader from "@/components/Loader";

export default function InnerCreateLanguageForm(
  props: FormikProps<CreateLanguageFormValues> & CreateLanguageFormProps
) {
  console.log(props.errors);
  return (
    <>
      <Form>
        <DialogTrigger asChild>
          <Button variant="default">
            <Plus />
            افزودن زبان جدید
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>زبان جدید</DialogTitle>
            {/* <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription> */}
          </DialogHeader>
          <div className="grid gap-4">
            <div className="grid gap-3">
              <Label htmlFor="name-1">عنوان</Label>
              <Input
                id="name-1"
                name="title"
                value={props.values.title}
                onChange={(e) => props.setFieldValue("title", e.target.value)}
              />
              <ErrorMessage
                // id="firstName-help"
                className="text-xs text-red-500"
                component={"p"}
                name={`title`}
              />
            </div>
            <div className="grid gap-3">
              <Label htmlFor="name-1">اسلاگ</Label>
              <Input
                id="name-1"
                name="slug"
                value={props.values.slug}
                onChange={(e) => props.setFieldValue("slug", e.target.value)}
              />
               <ErrorMessage
                // id="firstName-help"
                className="text-xs text-red-500"
                component={"p"}
                name={`slug`}
              />
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button type="button" variant="outline">
                انصراف
              </Button>
            </DialogClose>
            <Button
              onClick={() => props.handleSubmit()}
              disabled={props.createPending}
              type="submit"
            >
              {props.createPending ? <Loader size="4" /> : "ایجاد"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Form>
    </>
  );
}
