import {Form, FormikProps} from "formik";
import React, {Suspense, useRef} from "react";
import {CreateTosFormValues} from "../create/CreateTosForm";
import {UpdateTosFormProps} from "./UpdateTosForm";
import {Button} from "@/components/ui/button";
import {Field, FieldLabel} from "@/components/ui/field";
import Loader from "@/components/Loader";
import RichTextEditor, {RichTextEditorHandle} from "@/components/TextEditor";
import {Input} from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {SelectItem} from "@radix-ui/react-select";

export default function InnerUpdateTosForm(
  props: FormikProps<CreateTosFormValues> & UpdateTosFormProps
) {
  const editorRef = useRef<RichTextEditorHandle>(null);

  return (
    <Form className="grid grid-cols-3 w-full items-center gap-x-4 mb-10">
      <Field className="col-span-1">
        <FieldLabel>عنوان</FieldLabel>
        <Input
          value={props.values.title}
          onChange={(e) => props.setFieldValue("title", e.target.value)}
          className="bg-white"
        />
      </Field>
      <Field className="col-span-1">
        <FieldLabel>ورژن</FieldLabel>
        <Input
          value={props.values.version}
          onChange={(e) => props.setFieldValue("version", e.target.value)}
          className="bg-white"
        />
      </Field>
      <Field className="col-span-1 flex items-center space-x-2">
        <FieldLabel>فعال بودن نسخه</FieldLabel>

        <Select
          dir="rtl"
          value={String(props.values.isActive)} // 👈 "true" یا "false"
          onValueChange={(value) =>
            props.setFieldValue("isActive", value)
          }
        >
          <SelectTrigger className="w-[180px] bg-white w-full">
            <SelectValue placeholder="فعال بودن را انتخاب کنید" />
          </SelectTrigger>
          <SelectContent className="bg-white w-full">
            <SelectGroup>
              <SelectItem value="true">فعال باشد</SelectItem>
              <SelectItem value="false">فعال نباشد</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </Field>
      <Field className="col-span-3 w-full mt-10">
        <Suspense fallback={<Loader />}>
          <RichTextEditor ref={editorRef} value={props.values.content} />
        </Suspense>
      </Field>
      <div className="col-span-3  flex items-center justify-start gap-4  mt-10 w-full">
        <div>
          <Button type="submit">ثبت تغییرات</Button>
        </div>
        <div>
          <Button
            variant={"destructive"}
            type="button"
            onClick={() => {
              props.setMode("new");
              props.setVersion("");
            }}
          >
            انصراف
          </Button>
        </div>
      </div>
    </Form>
  );
}
