"use client"
import type { Session } from "next-auth";
import { SettingsForm, SettingsParameter } from "@/app/(profile)/profile/home/settings/_types";

import { Fragment, ReactNode, useCallback, useState } from "react";

import EditPencilIcon from "@/core/components/Icons/EditPencil";
import ModalComponent from "@/app/(profile)/profile/_components/Modal";
import ChangeParameter from "@/app/(profile)/profile/home/settings/_components/change";

interface EditParameterProps {
  parameter: Partial<SettingsParameter>;
  session: Session | null;
}
/**
 * TODO:
 *  the logic and flow of the component should be clarified and redo!
 */
export default function EditParameter({ parameter, session }: Readonly<EditParameterProps>): ReactNode {
  const [loading, setLoading] = useState<boolean>(false);
  const [typeChangeData, setTypeChangeData] = useState<Partial<SettingsParameter>>("email");
  const [isOpenModalChangeData, setIsOpenModalChangeData] = useState<boolean>(false);
  const [formData, setFormData] = useState<SettingsForm>({
    email: session?.user?.email as string,
    password: "",
  });
  const [editFields, setEditFields] = useState({
    email: false,
    password: false
  });

  const close = () => setIsOpenModalChangeData(false);

  const selectUpdateParameter = useCallback(
    (parameter: Partial<SettingsParameter>) => {
        setIsOpenModalChangeData(true);
        setTypeChangeData(parameter);
    },
    [])
  
  return (
    <Fragment>
      <ModalComponent width={388}
                      isOpen={isOpenModalChangeData}
                      onCancel={close}
                      title={`Change ${typeChangeData}`}>
        <ChangeParameter type={typeChangeData}
                         session={session}
                         close={close} />
      </ModalComponent>
      <button
        onClick={selectUpdateParameter.bind(globalThis, parameter)}
        className={"border rounded-[4px] h-10 w-10 flex items-center justify-center border-grey-600"}
      >
        <EditPencilIcon />
      </button>
    </Fragment>
  );
}