"use client";
import { useState } from "react";
import { Options } from "redaxios";

import { Toggle } from "@/components/input/toggle";
import { TextInput } from "@/components/input/input";
import { usePersistentState } from "@/utils/usePersistentState";
import { Body } from "@/utils/type";
import { useUpdateEffect } from "react-use";

export const Request = ({
  parameters,
  body,
  formattedBody,
  onBodyChange,
  children,
  onParamsChange,
}: {
  parameters: any;
  children: React.ReactElement;
  body: Array<Body> | undefined;
  formattedBody: Options | undefined;
  onBodyChange: (o: Options) => void;
  onParamsChange: (key: string, value: string | boolean) => void;
}) => {
  const [headers, setHeaders] = usePersistentState("headers", {
    Authorization: "hf_api_key",
  });

  const [bodyForm, setBodyForm] = useState<Options>({});

  useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);

  return (
    <div className="h-full bg-slate-900 px-4 xl:px-6 py-5">
      {children}
      {parameters && (
        <div className="mt-6 grid grid-cols-2 gap-6 w-full">
          <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
            Optional parameters
          </p>
          {parameters &&
            Object.entries(parameters).map(([key, value]) => (
              <div
                key={key}
                className="flex items-center justify-between gap-2"
              >
                {typeof value === "boolean" ? (
                  <div>
                    <Toggle
                      checked={value}
                      label={key}
                      onChange={(e) => onParamsChange(key, e)}
                    />
                  </div>
                ) : (
                  <TextInput
                    value={value as string}
                    label={key}
                    placeholder="value"
                    onChange={(e) => onParamsChange(key, e)}
                  />
                )}
              </div>
            ))}
        </div>
      )}
      {body?.length && (
        <div className="mt-6 grid grid-cols-2 gap-6 w-full">
          <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
            Body
          </p>
          {body?.length &&
            body.map((b, key) => (
              <div
                key={key}
                className="flex items-center justify-between gap-2"
              >
                {typeof b.defaultValue === "boolean" ? (
                  <div>
                    <Toggle
                      checked={b.defaultValue}
                      label={b.key}
                      onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
                    />
                  </div>
                ) : (
                  <TextInput
                    value={
                      (formattedBody?.[
                        b.key as keyof typeof formattedBody
                      ] as string) ?? (b.defaultValue as string)
                    }
                    label={b.key}
                    placeholder="value"
                    onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
                  />
                )}
              </div>
            ))}
        </div>
      )}
      <div className="mt-8 grid grid-cols-1 gap-6 w-full">
        <p className="text-slate-200 uppercase text-xs font-semibold">
          Headers
        </p>
        <TextInput
          value={headers?.Authorization}
          label="Authorization"
          placeholder="Authorization"
          onlyAlphaNumeric={false}
          onChange={(Authorization) =>
            setHeaders({ ...headers, Authorization })
          }
        />
      </div>
    </div>
  );
};
