import { createDrawerNavigator } from '@react-navigation/drawer';
import { Dimensions } from 'react-native';
import ChatGPTHome from '../../app/components/admin/homeComponents/apps/chatGPT/chatGPTHome';
import { AddChatGPTCredits } from '../../app/components/admin';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useGlobalAppData } from '../../context-store/appData';
import GetThemeColors from '../../app/hooks/themeColors';
import FullLoadingScreen from '../../app/functions/CustomElements/loadingScreen';
import { useGlobalInsets } from '../../context-store/insetsProvider';
import { useTranslation } from 'react-i18next';
import { getAIModels } from '../../app/components/admin/homeComponents/apps/chatGPT/contants/modelCache';

const Drawer = createDrawerNavigator();

function ChatGPTDrawer({ confirmationSliderData }) {
  const { decodedChatGPT } = useGlobalAppData();
  const { textColor, backgroundOffset, backgroundColor } = GetThemeColors();
  const { t } = useTranslation();

  const isMounted = useRef(false);
  const [didLoad, setDidLoad] = useState(false);
  const { bottomPadding } = useGlobalInsets();

  const chatGPTCoversations = decodedChatGPT.conversation || [];
  const chatGPTCredits = decodedChatGPT.credits;

  const drawerWidth = useMemo(() => {
    return Dimensions.get('screen').width * 0.5 < 150 ||
      Dimensions.get('screen').width * 0.5 > 230
      ? 175
      : Dimensions.get('screen').width * 0.55;
  }, [Dimensions]);

  const savedConversations =
    chatGPTCoversations.length != 0 ? [...chatGPTCoversations, null] : [null];

  const drawerElements = useMemo(() => {
    return savedConversations
      .map((element, id) => {
        const baseLabel = element
          ? element.firstQuery
          : t('apps.chatGPT.newChat');
        const uniqueName = `chat-${id}`;
        return (
          <Drawer.Screen
            key={id}
            name={uniqueName}
            initialParams={{ chatHistory: element }}
            component={ChatGPTHome}
            options={{
              drawerLabel: baseLabel,
            }}
          />
        );
      })
      .reverse();
  }, [chatGPTCoversations]);

  useEffect(() => {
    async function loadModels() {
      isMounted.current = true;
      const start = Date.now();
      try {
        await getAIModels();
        const now = Date.now();
        const difference = now - start;

        if (difference < 1000) {
          await new Promise(res => setTimeout(res, 1000 - difference));
        }
        if (!isMounted.current) return;
        setDidLoad(true);
      } catch (err) {
        console.log(err);
        const now = Date.now();
        const difference = now - start;
        if (difference < 1000) {
          await new Promise(res => setTimeout(res, 1000 - difference));
        }
        if (!isMounted.current) return;
        setDidLoad(true);
      }
    }
    loadModels();

    return () => {
      isMounted.current = false;
      setDidLoad(false);
    };
  }, []);

  if (chatGPTCredits > 30) {
    if (!didLoad) {
      return <FullLoadingScreen text={t('apps.chatGPT.loadingMessage')} />;
    }
    return (
      <Drawer.Navigator
        screenOptions={{
          drawerType: 'front',
          drawerStyle: {
            backgroundColor: backgroundColor,
            width: drawerWidth,
            paddingBottom: bottomPadding,
          },

          drawerActiveBackgroundColor: backgroundOffset,
          drawerActiveTintColor: textColor,
          drawerInactiveTintColor: textColor,

          headerShown: false,
          drawerPosition: 'right',
        }}
      >
        {drawerElements}
      </Drawer.Navigator>
    );
  } else {
    return (
      <AddChatGPTCredits confirmationSliderData={confirmationSliderData} />
    );
  }
}

export { ChatGPTDrawer };
