import React, {useState, useEffect} from "react";
import styles from "./Modal.module.css";

import AccountUpdatePage from "../components/AccountUpdatePage.js";
import CreateClerk from "../pages/CreateClerk"
import CreateCafe from "../pages/CreateCafe"
import CreateTenant from "../pages/CreateTenant"
import TablesPage from "./TablesPage.js";
import PaymentOptions from "./PaymentOptions.js";
import Transaction from "../pages/Transaction";
import Transaction_item from "../pages/Transaction_item";
import Transaction_pending from "../pages/Transaction_pending";
import Transaction_confirmed from "../pages/Transaction_confirmed";
import Transaction_success from "../pages/Transaction_success";
import Transaction_end from "../pages/Transaction_end";
import Transaction_failed from "../pages/Transaction_failed";
import Payment_claimed from "../pages/Payment_claimed";
import MaterialList from "../pages/MaterialList.js";
import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
import Reports from "../pages/Reports.js";
import NotificationRequest from "../pages/NotificationRequest.js";
import NotificationBlocked from "../pages/NotificationBlocked.js";
import WelcomePageEditor from "../pages/WelcomePageEditor.js";
import GuidePage from "../pages/GuidePage";
import Join from "../pages/Join";
import Loading from "../pages/Loading";
import Message from "../pages/Message";
import PlayerPrompt from "../pages/PlayerPrompt";
import Login from "../pages/Login";
import ResetPassword from "../pages/ResetPassword";
import { getImageUrl } from "../helpers/itemHelper.js";


import CreateCoupon from "../pages/CreateCoupon";
import CheckCoupon from "../pages/CheckCoupon";
import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";

const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal, handleMoveToTransaction, depth,welcomePageConfig, onModalCloseFunction, onModalYesFunction }) => {
  
  const [shopImg, setShopImg] = useState('');
  const [updateKey, setUpdateKey] = useState(0);

  useEffect(() => {
    if (welcomePageConfig) {
      const parsedConfig = JSON.parse(welcomePageConfig);
      setShopImg( getImageUrl(parsedConfig.image) || "")
    }
  }, [welcomePageConfig]);
  
  useEffect(() => {
    setUpdateKey(updateKey+1);
  }, [shop]);

  if (!isOpen) return null;

  // Function to handle clicks on the overlay

  const handleOverlayClick = (event) => {
    console.log(onModalCloseFunction)
    if (onModalCloseFunction) {
      onModalCloseFunction(); // Execute the passed closure
    }
    onClose(); // Close the modal
  };

  const handleNo = (event) => {
    if(onModalCloseFunction) 
      onModalCloseFunction();
    onClose();
  }

  // Function to handle clicks on the modal content
  const handleContentClick = (event) => {
    // Prevent click event from propagating to the overlay
    event.stopPropagation();
  };
  if(modalContent == '') handleOverlayClick();
  return (
    <div key={updateKey} onClick={handleOverlayClick} className={styles.modalOverlay}>
      <div className={styles.modalContent} onClick={handleContentClick}>
        
      {modalContent === "edit_account" && <AccountUpdatePage user={user} />}
        {modalContent === "reset-password" && <ResetPassword />}
        {modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
        {modalContent === "blocked_notification" && <NotificationBlocked />}
        {modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
        {modalContent === "create_kedai" && <CreateCafe shopId={shop.cafeId} />}
        {modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
        {modalContent === "edit_tables" && <TablesPage shop={shop} />}
        {modalContent === "new_transaction" && (
          <Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} depth={depth} shopImg={shopImg} setModal={setModal}/>
        )}
        {modalContent === "transaction_canceled" && (
          <Transaction propsShopId={shop.cafeId} />
        )}
        {modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType} setModal={setModal}/>}
        {modalContent === "transaction_item" && <Transaction_item />}
        {modalContent === "transaction_confirmed" && (
          <Transaction_confirmed  deviceType={deviceType} paymentUrl={shop.qrPayment} setModal={setModal}/>
        )}
        {modalContent === "payment_claimed" && (
          <Payment_claimed paymentUrl={shop.qrPayment} />
        )}
        
        {modalContent === "create_item" && (
          <GuidePage guideType={'create_item'} />
        )}
        {modalContent === "transaction_success" && <Transaction_success setModal={setModal}/>}
        {modalContent === "transaction_end" && <Transaction_end />}
        {modalContent === "transaction_failed" && <Transaction_failed />}
        {modalContent === "payment_option" && (
          <PaymentOptions shop={shop} shopId={shop.cafeId} />
        )}
        {modalContent === "add_material" && (
          <MaterialList handleClose={handleOverlayClick} cafeId={shop.cafeId} />
        )}
        {modalContent === "update_stock" && (
          <MaterialMutationsPage  handleClose={handleOverlayClick} cafeId={shop.cafeId} />
        )}
        {modalContent === "welcome_config" && <WelcomePageEditor cafeId={shop.cafeId} welcomePageConfig={shop.welcomePageConfig} />}
        {modalContent === "reports" && <Reports user={user} handleClose={handleOverlayClick} cafeId={shop.cafeId} />}

        
        {modalContent === "create_coupon" && <CreateCoupon />}
        {modalContent === "check_coupon" && <CheckCoupon />}
        {modalContent === "create_user" && <CreateUserWithCoupon setModal={setModal}/>}

        
        {modalContent === "join" && <Join setModal={setModal} />}
        {modalContent === "claim-coupon" && <Join setModal={setModal} />}
        {modalContent === "loading" && <Loading setModal={setModal} />}
        {modalContent === "message" && <Message handleYes={onModalYesFunction} handleNo={handleNo}/>}
        {modalContent === "player-prompt" && <PlayerPrompt cafeId={shop.cafeId} setModal={setModal} handleClose={handleOverlayClick} welcomePageConfig={shop.welcomePageConfig}/>}
      </div>
    </div>
  );
};

export default Modal;