"use client";
import {ErrorMessage, Form, FormikProps} from "formik";
import React from "react";

import {Field, FieldLabel} from "@/components/ui/field";
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";

import {
  CreateExpertiseValues,
  UpdateExpertiseProps,
} from "./UpdateExpertiseForm";

export default function InnerUpdateExpertiseForm(
  props: FormikProps<CreateExpertiseValues> & UpdateExpertiseProps
) {
  const {setFieldValue} = props;

  return (
    <Form className="space-y-4">
      <div className="border p-4 rounded-md space-y-4 bg-white">
        <Field>
          <FieldLabel htmlFor={`slug`}>اسلاگ</FieldLabel>
          <Input
            id={`slug`}
            placeholder="Slug"
            name={`slug`}
            value={props.values.slug}
            onChange={(e) => props.setFieldValue(`slug`, e.target.value)}
          />
          <ErrorMessage
            className="text-xs text-red-500"
            component={"div"}
            name={`slug`}
          />
        </Field>
        {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 space-y-4 bg-white"
            >
              <h4 className="font-semibold text-lg">
                محتوای {lang?.title} ({lang?.slug})
              </h4>

              {/* First Name */}
              <Field>
                <FieldLabel htmlFor={`translations.${index}.firstName`}>
                  نام
                </FieldLabel>
                <Input
                  id={`translations.${index}.displayName`}
                  placeholder="Display Name"
                  name={`translations.${index}.displayName`}
                  value={tr.displayName}
                  onChange={(e) =>
                    props.setFieldValue(
                      `translations.${index}.displayName`,
                      e.target.value
                    )
                  }
                />
                <ErrorMessage
                  className="text-xs text-red-500"
                  component={"div"}
                  name={`translations.${index}.displayName`}
                />
              </Field>
            </div>
          );
        })}
        <div>
          <Button className="w-fit">ثبت اطلاعات</Button>
        </div>
      </div>
    </Form>
  );
}
