"use client";

import React, { useState } from "react";

import styles from "@/components/administrator/modals/Confirm/confirm.module.css";

import { AiTwotoneWarning } from "react-icons/ai";
import Button from "@/components/ui/Button/button";
import Loader from "@/components/web/Loader/loader";
import { isPromise } from "@/app/library/library";

const Confirm = (props) => {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <AiTwotoneWarning /> {props.data?.confirmTitle}
      </div>
      <div
        className={styles.content}
        dangerouslySetInnerHTML={{ __html: props.data?.confirmText }}></div>
      <div className={styles.button_container}>
        <Button
          className={styles.button}
          disabled={isLoading}
          onClick={() => {
            setIsLoading(true);

            const isPromiseFn = isPromise(props.config?.accept?.action);
            if (isPromiseFn) {
              new Promise((resolve, reject) => {
                try {
                  resolve(props.config?.accept?.action(props.config));
                } catch (error) {
                  reject(error);
                } finally {
                  setIsLoading(false);
                }
              });
              return;
            }

            props.config?.accept?.action(props.config);
            setIsLoading(false);
          }}>
          {isLoading && (
            <Loader
              color="#fff"
              width={15}
            />
          )}{" "}
          {props.config?.accept?.text}
        </Button>
      </div>
    </div>
  );
};

export default Confirm;
