import { useContext, useEffect, useState } from 'react';
import ChatBotWindow from './ChatBotWindow';
import ChatBotBtn from './ChatBotBtn';
import ChatBotContainer from './ChatBotContainer';
import { PremiumSettings } from '../../types/types';
import {
  PremiumSettingsContext,
  SettingsContext,
} from '../../context/contexts';

interface ChatBotProps {
  className?: string;
  customizeMode?: boolean;
}

export default function ChatBot({ className, customizeMode }: ChatBotProps) {
  const settings = useContext(SettingsContext);
  const premiumSettings = useContext(PremiumSettingsContext);

  const [open, setOpen] = useState(customizeMode ? true : false);

  const handleOnOpen = () => {
    !customizeMode ? setOpen(!open) : null;
  };

  if (!premiumSettings.loaded || !settings.loaded) {
    return null;
  }

  if (!customizeMode) {
    if (!settings.aiEnabled) return null;

    if (
      premiumSettings &&
      Array.isArray(premiumSettings.visibleOnPages) &&
      premiumSettings.visibleOnPages.length > 0
    ) {
      const ids = premiumSettings.visibleOnPages.map((d) => d.id);
      // check if class home is added to body
      if (document.body.classList.contains('home')) {
        if (!ids.includes(0)) {
          return null;
        }
      } else {
        // Ensure my_script_data is defined or imported
        const pageID = (window as any).my_script_data?.pageID;
        if (!ids.includes(parseInt(pageID))) {
          return null;
        }
      }
    }
  }
  return (
    <div className={className}>
      <ChatBotContainer customizeMode={customizeMode}>
        <ChatBotWindow
          settings={settings}
          premiumSettings={premiumSettings}
          customizeMode={customizeMode}
          setShow={setOpen}
          show={open}
        />
        <ChatBotBtn customizeMode={customizeMode} onClick={handleOnOpen} />
      </ChatBotContainer>
    </div>
  );
}