import React from "react";
import { CloseIcon } from "@/assets/svgs";
import { InteractiveButton } from "@/components/InteractiveButton";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const ModalPrompt = ({
  closeModalFunction,
  actionHandler,
  title = "Add You Text",
  titleClasses = "text-center font-bold text-lg",
  acceptText = "Submit",
  rejectText = "Close",
  isInfo = false,
}) => {
  const [loading, setLoading] = React.useState(false);
  const schema = yup.object({
    message: yup.string(),
  });

  const { register, handleSubmit } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = async (data) => {
    setLoading(true);
    try {
      const result = await actionHandler(data.message);
      closeModalFunction();
      setLoading(false);
    } catch (error) {
      setLoading(false);
      closeModalFunction();
    }
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 ">
      <form
        onSubmit={handleSubmit(onSubmit)}
        className="flex w-auto min-w-[27rem]  flex-col gap-3 rounded-[.5rem] bg-white py-6"
      >
        <div className="flex justify-between px-6">
          <div>
            {title ? <div className={` ${titleClasses}`}>{title}</div> : null}
          </div>
          <button disabled={loading} onClick={closeModalFunction} type="button">
            <CloseIcon className="h-4 w-4" />
          </button>
        </div>

        <div className="px-6 text-[#525252]">
          <input
            type="text"
            autofill="do-not-autofill"
            data-gramm="false"
            placeholder={title}
            className="border-bgSolid focus:border-controlBaseHighlight bg-base text-mini text-labelBase placeholder-labelFaint text-mini border-bgSolid mt-1 w-full appearance-none rounded  bg-transparent focus:outline-none focus:ring-0"
            autocomplete="on"
            withspellcheck="false"
            style={{ textTransform: "none" }}
            {...register("message")}
          />
        </div>

        <div className="mt-4 flex justify-between px-6 font-medium leading-[1.5rem] text-[base] ">
          <button
            disabled={loading}
            className="mr-2 flex h-[2.75rem] w-full items-center justify-center rounded-[.5rem] border border-[#d8dae5] text-[#667085]"
            onClick={closeModalFunction}
            type="button"
          >
            {rejectText?.charAt(0)?.toUpperCase() +
              rejectText?.slice(1)?.toLowerCase()}
          </button>
          <InteractiveButton
            disabled={loading}
            loading={loading}
            className={`flex items-center h-[2.7rem] justify-center gap-x-5 rounded-[.5rem]  ${
              isInfo ? "bg-primaryBlue" : "bg-[#1d96e1]"
            } ml-2 w-full px-6 text-white`}
            type="submit"
          >
            {acceptText?.charAt(0)?.toUpperCase() +
              acceptText?.slice(1)?.toLowerCase()}
          </InteractiveButton>
        </div>
      </form>
    </div>
  );
};

export default ModalPrompt;
