wag-managment-frontend/src/components/ContextComponents/Commons/PageUpdate.tsx

import React, { FormEvent } from "react";
import IsNotAllowed from "./PageisNotAllowed";
import EventButton from "./ButtonEvent";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

interface UpdatePageButtonProps {
  title: string;
  validation: any;
  tableSelectedRow: any;
  setTableSelectedRow: React.Dispatch<React.SetStateAction<any>>;
  formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
  isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
  onClickAction: () => void;
}

const PageUpdate: React.FC<UpdatePageButtonProps> = ({
  title,
  validation,
  tableSelectedRow,
  setTableSelectedRow,
  formPageFunction,
  isFormEnabledFunction,
  onClickAction,
}) => {
  const [validatedData, setValidatedData] = React.useState({});
  const [zodValidation, setZodValidation] = React.useState(z.object({}));

  const validationObj = validation?.validated;
  const validationHeaders = validation?.headers;

  React.useEffect(() => {
    if (Object.keys(validatedData).length === 0) {
      setValidatedData(tableSelectedRow);
      let zodValidationInternal: any = {};

      Object.keys(tableSelectedRow).map((key: string) => {
        zodValidationInternal[key] = null;

        const keyValidation = validationObj[key] || {
          fieldType: { type: "string" },
          required: false,
        };
        const fieldType: String = keyValidation.fieldType?.type || "string";
        const required = keyValidation.required || false;
        if (fieldType === "string") {
          zodValidationInternal[key] = required
            ? z.string()
            : z.string().optional();
        } else if (fieldType === "integer") {
          zodValidationInternal[key] = required
            ? z.number()
            : z.number().optional();
        }
      });
      setZodValidation(zodValidationInternal);
    }
  }, [validation]);

  const form = useForm<z.infer<typeof zodValidation>>({
    resolver: zodResolver(zodValidation),
  });

  function closeFormPage() {
    formPageFunction(<IsNotAllowed />);
    setTableSelectedRow({});
    isFormEnabledFunction(false);
  }
  function onSubmit() {
    console.log("onSubmit");
  }

  return (
    <>
      <h1 className="text-center text-3xl">{title}</h1>
      <div className=" md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
        <EventButton
          onClick={() => closeFormPage()}
          label="Dashboarda Dön"
          bgColor="bg-red-700"
          icon={
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-square-x"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
              <path d="m15 9-6 6" />
              <path d="m9 9 6 6" />
            </svg>
          }
        />
        <div className="absolute right-0">
          <EventButton
            onClick={() => onClickAction()}
            label="Kaydet"
            bgColor="bg-emerald-700"
            icon={
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="lucide lucide-check"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg>
            }
          />
        </div>
      </div>
      <div>
        {Object.keys(validatedData).length !== 0 && (
          <Form {...form}>
            <form
              // onSubmit={onSubmit}
              className="space-y-5 max-w-3xl mx-auto py-10"
            >
              {Object.entries(validatedData).map(
                ([key, value]: [string, any]) => {
                  console.log("key", key);
                  const keyValidation = validationObj[key] || {
                    fieldType: { type: "string" },
                    required: false,
                  };
                  const fieldType = keyValidation.fieldType?.type || "string";
                  if (fieldType === "string" && validationHeaders[key]) {
                    return (
                      <>
                        <div className="mb-4">
                          <label className="mb-2.5 block font-medium text-black dark:text-white">
                            {validationHeaders[key] || "Unknown"}
                          </label>
                          <div className="relative">
                            <FormField
                              control={form.control}
                              name={key as keyof typeof validatedData}
                              render={({ field }) => (
                                <FormItem>
                                  <FormControl>
                                    <input
                                      type="text"
                                      className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
                                      {...field}
                                      value={field.value || value}
                                      defaultValue={value || ""}
                                    />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <span className="absolute right-4 top-4">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="lucide lucide-pencil"
                              >
                                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
                                <path d="m15 5 4 4" />
                              </svg>
                            </span>
                          </div>
                        </div>
                      </>
                    );
                  } else if (
                    fieldType === "integer" &&
                    validationHeaders[key]
                  ) {
                    return (
                      <>
                        <div className="mb-4">
                          <label className="mb-2.5 block font-medium text-black dark:text-white">
                            {validationHeaders[key] || "Unknown"}
                          </label>
                          <div className="relative">
                            <FormField
                              control={form.control}
                              name={key as keyof typeof validatedData}
                              render={({ field }) => (
                                <FormItem>
                                  <FormControl>
                                    <input
                                      type="text"
                                      className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
                                      {...field}
                                      value={field.value || value}
                                    />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <span className="absolute right-4 top-4">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="lucide lucide-pencil"
                              >
                                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
                                <path d="m15 5 4 4" />
                              </svg>
                            </span>
                          </div>
                        </div>
                      </>
                    );
                  }
                }
              )}
            </form>
          </Form>
        )}
      </div>
    </>
  );
};

export default PageUpdate;