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

import {Field, FieldLabel} from "@/components/ui/field";
import {Input} from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import SelectCalendar from "@/components/SelectCalendar";
import {Button} from "@/components/ui/button";
import Loader from "@/components/Loader";

import {
  CreatePatientFormValues,
  UpdatePatientFormProps,
} from "./UpdatePatientForm";

export default function InnerUpdatePatientForm(
  props: FormikProps<CreatePatientFormValues> & UpdatePatientFormProps
) {
  const {setFieldValue} = props;
  return (
    <>
      <Form>
        <div className="border p-4 rounded-md space-y-4 bg-white grid grid-cols-12 gap-x-4 gap-y-10">
          <div className="col-span-6">
            <Field>
              <FieldLabel htmlFor={`firstName`}>نام</FieldLabel>
              <Input
                id={`firstName`}
                aria-describedby="firstName-help"
                name={`firstName`}
                value={props.values.firstName}
                onChange={(e) => setFieldValue(`firstName`, e.target.value)}
                required
              />
              <ErrorMessage
                id="firstName-help"
                className="text-xs text-red-500"
                component={"p"}
                name={`firstName`}
              />
            </Field>
          </div>
          <div className="col-span-6">
            <Field>
              <FieldLabel htmlFor={`lastName`}>نام خانوادگی</FieldLabel>
              <Input
                id={`lastName`}
                name={`lastName`}
                aria-describedby="lastName-help"
                required
                value={props.values.lastName}
                onChange={(e) => setFieldValue(`lastName`, e.target.value)}
              />
              <ErrorMessage
                id="lastName-help"
                className="text-xs text-red-500"
                component={"p"}
                name={`lastName`}
              />
            </Field>
          </div>

          <div className="col-span-4">
            <Field>
              <FieldLabel htmlFor={`sex`}>جنسیت</FieldLabel>
              <Select
                dir="rtl"
                value={props.preValues?.sex ?? "male"}
                onValueChange={(value) => setFieldValue("sex", value)}
              >
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="انتخاب کنید" />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="male">مرد</SelectItem>
                    <SelectItem value="female">زن</SelectItem>
                    <SelectItem value="other">سایر</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
              <ErrorMessage
                className="text-xs text-red-500"
                component={"p"}
                name={`sex`}
              />
            </Field>
          </div>
          <div className="col-span-8">
            <Field>
              <FieldLabel htmlFor={`phone`}> شماره تماس</FieldLabel>
              <Input
                id={`phone`}
                name={`phone`}
                aria-describedby="phone-help"
                value={props.values.phone ?? ""}
                onChange={(e) => setFieldValue(`phone`, e.target.value)}
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"p"}
                name={`phone`}
                id="phone-help"
              />
            </Field>
          </div>
          <div className="col-span-6">
            <Field>
              <FieldLabel htmlFor={`passportCode`}>
                کد پاسپورت (افرادغیرایرانی)
              </FieldLabel>
              <Input
                id={`passportCode`}
                name={`passportCode`}
                aria-describedby="passportCode-help"
                value={props.values.passportCode ?? ""}
                onChange={(e) => setFieldValue(`passportCode`, e.target.value)}
              />
              <ErrorMessage
                id="passportCode-help"
                className="text-xs text-red-500"
                component={"p"}
                name={`passportCode`}
              />
            </Field>
          </div>
          <div className="col-span-6">
            <Field>
              <FieldLabel htmlFor={`nationalityCode`}>
                کد ملی (افراد ایرانی)
              </FieldLabel>
              <Input
                id={`nationalityCode`}
                name={`nationalityCode`}
                aria-describedby="nationalityCode-help"
                value={props.values.nationalityCode ?? ""}
                onChange={(e) =>
                  setFieldValue(`nationalityCode`, e.target.value)
                }
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"p"}
                name={`nationalityCode`}
                id="nationalityCode-help"
              />
            </Field>
          </div>
          <div className="col-span-6">
            <Field>
              <FieldLabel htmlFor={`nationality`}>ملیت بیمار</FieldLabel>
              <Select
                dir="rtl"
                value={props.preValues.nationalityId?.toString()}
                onValueChange={(value) => setFieldValue("nationality", value)}
              >
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="انتخاب کنید" />
                </SelectTrigger>

                <SelectContent>
                  {props.fetchCountriesLoading ? (
                    <div className="flex items-center justify-center p-2">
                      <Loader />
                    </div>
                  ) : (
                    <SelectGroup>
                      {props.countries?.map((country) => (
                        <SelectItem
                          key={country.id}
                          value={country.id.toString()}
                        >
                          {country.name}
                        </SelectItem>
                      ))}
                    </SelectGroup>
                  )}
                </SelectContent>
              </Select>

              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`nationality`}
              />
            </Field>
          </div>
          <div className="col-span-6">
            <Field>
              <FieldLabel htmlFor={`email`}>ایمیل</FieldLabel>
              <Input
                id={`email`}
                name={`email`}
                value={props.values.email ?? ""}
                onChange={(e) => setFieldValue(`email`, e.target.value)}
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`lastName`}
              />
            </Field>
          </div>

          <div className="col-span-8">
            <Field>
              <SelectCalendar
                date={
                  props.values.birthDate
                    ? new Date(props.values.birthDate)
                    : undefined
                }
                setDate={(value) => setFieldValue("birthDate", value)}
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`lastName`}
              />
            </Field>
          </div>
          <div className="col-span-4">
            <Field>
              <FieldLabel htmlFor={`preferredLanguage`}>
                زبان ترجیحی بیمار
              </FieldLabel>
              <Select
                dir="rtl"
                value={props.values.preferredLanguage}
                onValueChange={(value) =>
                  setFieldValue(
                    "preferredLanguage",
                    value as "fa" | "en" | "ar"
                  )
                }
              >
                <SelectTrigger
                  id="dropdown"
                  size="sm"
                  className="bg-white w-full"
                >
                  <SelectValue placeholder="انتخاب کنید" />
                </SelectTrigger>
                <SelectContent align="center">
                  <SelectItem value="fa">فارسی</SelectItem>
                  <SelectItem value="en">انگلیسی</SelectItem>
                  <SelectItem value="ar">عربی</SelectItem>
                </SelectContent>
              </Select>
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`lastName`}
              />
            </Field>
          </div>
          <div className="col-span-12">
            <Field>
              <FieldLabel htmlFor={`address`}>آدرس</FieldLabel>
              <Input
                id={`address`}
                name={`address`}
                value={props.values.address ?? ""}
                onChange={(e) => setFieldValue(`address`, e.target.value)}
              />
              <ErrorMessage
                className="text-xs text-red-500"
                component={"div"}
                name={`lastName`}
              />
            </Field> 
          </div>
          {/* <div className="col-span-12 grid grid-cols-12">
            <div className="col-span-6 space-y-8 mt-4">
              <SectionTitle label="آپلود کارت ملی بیمار" />

              <UploadDropzone documentType={"NATIONAL_ID"} />
            </div>
            <div className="col-span-6 space-y-8 mt-4">
              <SectionTitle label="آپلود پاسپورت بیمار ( درصورت نداشتن کارت ملی )" />

              <UploadDropzone documentType={"NATIONAL_ID"} />
            </div>
            <div className="col-span-12 space-y-8 mt-4">
              <SectionTitle label="آپلود نتایج آزمایش بیمار" />

              <UploadDropzone documentType="LAB_RESULT" />
            </div>
            <div className="col-span-12 space-y-8 mt-4">
              <SectionTitle label="آپلود اسناد پزشکی بیمار" />

              <UploadDropzone documentType="MEDICAL_IMAGE" />
            </div>
            <div className="col-span-12 space-y-8 mt-4">
              <SectionTitle label="آپلود نسخه پزشک بیمار" />

              <UploadDropzone documentType="MEDICAL_IMAGE" />
            </div>
            <div className="col-span-12 space-y-8 mt-4">
              <SectionTitle label="آپلود سایر مدارک بیمار" />

              <UploadDropzone documentType="MEDICAL_IMAGE" />
            </div>
          </div> */}
          <div className="col-span-4">
            <Button type="submit">ذخیره اطلاعات</Button>
          </div>
        </div>
      </Form>
    </>
  );
}
