"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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  CreateTransferTeamMemberProps,
  CreateTransferTeamMemberValues,
} from "./CreateTransferTeamMemberForm";

export default function InnerCreateTransferTeamMember(
  props: FormikProps<CreateTransferTeamMemberValues> &
    CreateTransferTeamMemberProps
) {
  const {setFieldValue, ...rest} = props;

  console.log(props.errors);
  return (
    <Form className="space-y-4">
      <div className="border p-4 rounded-md space-y-4 bg-white">
        <Field>
          <FieldLabel htmlFor={`email`}>ایمیل</FieldLabel>
          <Input
            id={`email`}
            placeholder="Email"
            name={`email`}
            value={props.values.email}
            onChange={(e) => setFieldValue(`email`, e.target.value)}
          />
          <ErrorMessage
            className="text-xs text-red-500"
            component={"div"}
            name={`email`}
          />
        </Field>
        <Field>
          <FieldLabel htmlFor={`phone`}>شماره موبایل</FieldLabel>
          <Input
            id={`phone`}
            placeholder="Mobile number"
            name={`phone`}
            value={props.values.phone}
            onChange={(e) => setFieldValue(`phone`, e.target.value)}
          />
          <ErrorMessage
            className="text-xs text-red-500"
            component={"div"}
            name={`phone`}
          />
        </Field>
        {props.values.type === "DOCTOR" && (
          <Field>
            <FieldLabel htmlFor={`medicalNumber`}>شماره نظام پزشکی</FieldLabel>
            <Input
              id={`medicalNumber`}
              placeholder="Medical Number"
              name={`medicalNumber`}
              value={props.values.medicalNumber}
              onChange={(e) => setFieldValue(`medicalNumber`, e.target.value)}
            />
            <ErrorMessage
              className="text-xs text-red-500"
              component={"div"}
              name={`medicalNumber`}
            />
          </Field>
        )}
        {props.values.type !== "TRANSFER_TEAM" && (
          <Field>
            <FieldLabel>تخصص</FieldLabel>

            <Select
              dir="rtl"
              value={
                props.values.expertiseId ? String(props.values.expertiseId) : ""
              }
              onValueChange={(value) =>
                setFieldValue(`expertiseId`, value ? Number(value) : null)
              }
            >
              <SelectTrigger>
                <SelectValue placeholder="انتخاب تخصص" />
              </SelectTrigger>

              <SelectContent>
                {props.expertises.map((exp) => {
                  // ترجمه مرتبط با همین زبان
                  const translation = exp.translations.find(
                    (t) => t.lang_id === 1
                  );

                  return (
                    <SelectItem key={exp.id} value={String(exp.id)}>
                      {translation?.displayName ?? exp.slug}
                    </SelectItem>
                  );
                })}
              </SelectContent>
            </Select>

            <ErrorMessage
              className="text-xs text-red-500"
              component="div"
              name={`expertiseId`}
            />
          </Field>
        )}
      </div>
      {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}.firstName`}
                placeholder="First Name"
                name={`translations.${index}.firstName`}
                value={tr.firstName}
                onChange={(e) =>
                  setFieldValue(
                    `translations.${index}.firstName`,
                    e.target.value
                  )
                }
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`translations.${index}.firstName`}
              />
            </Field>

            {/* Last Name */}
            <Field>
              <FieldLabel htmlFor={`translations.${index}.lastName`}>
                نام خانوادگی
              </FieldLabel>
              <Input
                id={`translations.${index}.lastName`}
                placeholder="Last Name"
                name={`translations.${index}.lastName`}
                value={tr.lastName}
                onChange={(e) =>
                  setFieldValue(
                    `translations.${index}.lastName`,
                    e.target.value
                  )
                }
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`translations.${index}.lastName`}
              />
            </Field>

            {/* Position */}
            <Field>
              <FieldLabel htmlFor={`translations.${index}.position`}>
                سمت
              </FieldLabel>
              <Input
                id={`translations.${index}.position`}
                placeholder="Position"
                name={`translations.${index}.position`}
                value={tr.position}
                onChange={(e) =>
                  setFieldValue(
                    `translations.${index}.position`,
                    e.target.value
                  )
                }
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`translations.${index}.position`}
              />
            </Field>
          </div>
        );
      })}
      <Button type="submit">ثبت اطلاعات</Button>
    </Form>
  );
}
