"use client"
import { ErrorMessage, Form, FormikProps } from "formik";
import React, { useRef, useState } from "react";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import RichTextEditor, { RichTextEditorHandle } from "@/components/TextEditor";
import { Button } from "@/components/ui/button";
import Loader from "@/components/Loader";
import UploadDropzone from "@/components/uploadDropzone";

import {
  CreateTransferPackageValues,
  CreateTransferPackageProps,
} from "./CreateTransferPackageForm";

export default function InnerCreateTransferPackageForm(
  props: FormikProps<CreateTransferPackageValues> &
    CreateTransferPackageProps,
) {
  const { setFieldValue } = props;

  const [locationImages, setLocationImages] = useState<string[]>([]);
  const [galleryImages, setGalleryImages] = useState<string[]>([]);

  const editorRefs = useRef<RichTextEditorHandle[]>([]);

  const handleSave = () => {
    props.values.translations.forEach((_, i) => {
      const content = editorRefs.current[i]?.getContent() || "";
      setFieldValue(`translations.${i}.content`, content);
    });

    setFieldValue("locationImageIds", locationImages);
    setFieldValue("galleryImageIds", galleryImages);

    props.handleSubmit();
  };

  return (
    <Form className="space-y-8">
      
      {/* Location */}
      <div className="border p-4 rounded-md bg-white space-y-4">
        <Field>
          <FieldLabel>موقعیت مکانی محل اقامت ( آدرس گوگل مپ )</FieldLabel>
          <Input
            value={props.values.location}
            onChange={(e) =>
              setFieldValue("location", e.target.value)
            }
          />
          <ErrorMessage
            component="div"
            name="location"
            className="text-xs text-red-500"
          />
        </Field>

        <Field>
          <FieldLabel>قیمت پکیج</FieldLabel>
          <Input
            value={props.values.price}
            onChange={(e) =>
              setFieldValue("price", e.target.value)
            }
          />
          <ErrorMessage
            component="div"
            name="price"
            className="text-xs text-red-500"
          />
        </Field>
      </div>

      {/* Location Images */}
      <div className="border p-4 rounded-md bg-white space-y-4">
        <FieldLabel>تصاویر لوکیشن های تفریحی</FieldLabel>
        <UploadDropzone
          fileType="image"
          multiple
          documentType="OTHER_FILE"
          output={locationImages}
          setOutput={setLocationImages}
        />
      </div>

      {/* Gallery Images */}
      <div className="border p-4 rounded-md bg-white space-y-4">
        <FieldLabel>تصاویر گالری</FieldLabel>
        <UploadDropzone
          fileType="image"
          documentType="OTHER_FILE"
          multiple
          output={galleryImages}
          setOutput={setGalleryImages}
        />
      </div>

      {/* Translations */}
      {props.values.translations.map((tr, index) => {
        const lang = props.languages.find(
          (l) => l.id === tr.lang_id,
        );

        return (
          <div
            key={tr.lang_id}
            className="border p-4 rounded-md bg-white space-y-4"
          >
            <h4 className="font-semibold text-lg">
              ردیف برای زبان {lang?.title} ({lang?.slug})
            </h4>

            <Field>
              <FieldLabel>نام پکیج</FieldLabel>
              <Input
                value={tr.name}
                onChange={(e) =>
                  setFieldValue(
                    `translations.${index}.name`,
                    e.target.value,
                  )
                }
              />
              <ErrorMessage
                component="div"
                name={`translations.${index}.name`}
                className="text-xs text-red-500"
              />
            </Field>

            <Field>
              <FieldLabel>محتوا</FieldLabel>
              <RichTextEditor
                ref={(el) =>
                  (editorRefs.current[index] = el!)
                }
                value={tr.content}
              />
              <ErrorMessage
                component="div"
                name={`translations.${index}.content`}
                className="text-xs text-red-500"
              />
            </Field>
          </div>
        );
      })}

      <Button
        disabled={props.createPending}
        type="button"
        onClick={handleSave}
      >
        {props.createPending ? <Loader size="4" /> : "ثبت اطلاعات"}
      </Button>
    </Form>
  );
}
