"use client";
import React from "react";
import EventButton from "@/components/ContextComponents/Commons/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";
import { retrieveValidationsByEndpoint } from "@/components/ContextComponents/functions/retrieveEndpointAndValidations";

interface BuildCreateProps {
  pageInfo: any;
  endpoint: string;
}

const BuildCreate: React.FC<BuildCreateProps> = ({ pageInfo, endpoint }) => {
  const [zodValidation, setZodValidation] = React.useState(z.object({}));
  const [apiValidation, setApiValidation] = React.useState<Record<string, any>>(
    {}
  );
  const [apiHeaders, setApiHeaders] = React.useState<Record<string, string>>(
    {}
  );

  React.useEffect(() => {
    retrieveValidationsByEndpoint(endpoint).then((validations: any) => {
      setZodValidation(validations.zodValidation as any);
      setApiHeaders(validations.apiValidation?.headers);
      setApiValidation(validations.apiValidation?.validated);
    });
  }, []);

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

  function closeFormPage() {}
  function onClickAction() {}

  return (
    <div>
      <>
        <h1 className="text-center text-3xl">{pageInfo.description}</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>
        {
          <Form {...form}>
            <form
              // onSubmit={onSubmit}
              className="space-y-5 max-w-3xl mx-auto py-10"
            >
              {Object.entries(apiValidation).map(
                ([key, value]: [string, any]) => {
                  console.log("key", key);
                  const keyValidation = apiValidation[key] || {
                    fieldType: { type: "string" },
                    required: false,
                  };
                  const fieldType = keyValidation.fieldType?.type || "string";
                  if (fieldType === "string" && apiHeaders[key]) {
                    return (
                      <>
                        <div className="mb-4" key={key}>
                          <label className="mb-2.5 block font-medium text-black dark:text-white">
                            {apiHeaders[key] || "Unknown"}
                          </label>
                          <div className="relative">
                            <FormField
                              control={form.control}
                              name={key}
                              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}
                                    />
                                  </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" && apiHeaders[key]) {
                    return (
                      <>
                        <div className="mb-4" key={key}>
                          <label className="mb-2.5 block font-medium text-black dark:text-white">
                            {apiHeaders[key] || "Unknown"}
                          </label>
                          <div className="relative">
                            <FormField
                              control={form.control}
                              name={key}
                              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}
                                    />
                                  </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 BuildCreate;