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

import { type FormEvent, ReactNode, useState } from "react";

import ModalComponent from '@/app/(profile)/profile/_components/Modal';
import DoneUpdate from "@/app/(profile)/profile/home/settings/_components/done";
import Button from '@/core/components/Button';

interface ChangeParameterProps {
  type: Partial<SettingsParameter>;
  session: Session | null;
  close?: () => void;
}
/**
 * TODO:
 *  refine the logic flow and redo!
 */
export default function ChangeParameter({ type, session, close }: ChangeParameterProps): ReactNode {
  const [currentPassword, setCurrentPassword] = useState<string>("");
  const [value, setValue] = useState<string>("");
  const [passwordConfirm, setPasswordConfirm] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [openDoneModal, setOpenDoneModal] = useState<boolean>(false);

  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    // TODO: Add validation for input data (check if the password is correct, 
    // verify if the new passwords match, ensure the email is valid, etc.)

    setLoading(true);
    setError(null);

    setTimeout(() => {
      setLoading(false);
      setOpenDoneModal(true);
    }, 1000);
  };

  return (
    <>
      <ModalComponent width={317}
                      onCancel={() => setOpenDoneModal(false)}
                      isOpen={openDoneModal}>

        <DoneUpdate onClose={() => setOpenDoneModal(false)}
                    type={type} />

      </ModalComponent>
      <form onSubmit={() => { }}>
        <div className="flex flex-col gap-[12px] w-full py-2">
          <label
            className="font-[400] text-[14px] leading-[12.73px] text-[#13131399]"
            htmlFor={type}>
            Please enter your current password
          </label>
          <input
            className={`
              border border-input rounded-[4px] h-[40px] px-[11px] 
              text-[14px] leading-[12.73px] font-[400] outline-none w-full
            `}
            id={type}
            name={type}
            type="password"
            onChange={({ target }) => setCurrentPassword(target.value)}
            value={currentPassword}
            required
          />
        </div>
        <div className="flex flex-col gap-[12px] w-full py-2">
          <label
            className={"font-[400] text-[14px] leading-[12.73px] text-[#13131399]"}
            htmlFor={type}>
            New {type}
          </label>
          <input
            className="border border-input rounded-[4px] h-[40px] px-[11px] text-[14px] leading-[12.73px] font-[400] outline-none w-full"
            id={type}
            name={type}
            type={type === "password" ? "password" : "text"}
            onChange={({ target }) => setValue(target.value)}
            value={value}
            required
          />
        </div>
        {type === 'password' && (
          <div className="flex flex-col gap-[12px] w-full py-2">
            <label
              className="font-[400] text-[14px] leading-[12.73px] text-[#13131399]"
              htmlFor={type}>
              Confirm password
            </label>
            <input
              className="border border-input rounded-[4px] h-[40px] px-[11px] text-[14px] leading-[12.73px] font-[400] outline-none w-full"
              id={type}
              name={type}
              type="password"
              onChange={({ target }) => setPasswordConfirm(target.value)}
              value={passwordConfirm}
              required
            />
          </div>
        )}
        {error && <div className="text-red-500 text-sm mt-2">{error}</div>}
        <div className="flex items-center gap-[32px] mt-[32px]">
          <Button mode={"secondary"}
                  type={"button"}
                  onClick={() => {
                    setValue("");
                    close && close();
                  }}>
            Cancel
          </Button>
          <Button mode={"primary"}
                  type={"submit"}
                  disabled={loading}
                  onClick={handleSubmit}
          >
            {loading ? "Updating..." : "Update"}
          </Button>
        </div>
      </form>
    </>
  );
};