import React, { useRef, useEffect, useMemo, createContext } from "reactn";

import BottomSheetContainer from "../components/BottomSheetContainer";
import { WebView } from "../components/WebView";

import { Palette } from "../styles";
import { useContext } from "react";
import { Platform } from "react-native";

export const WebViewContext = createContext();

export default ({ children }) => {
  const [webViewUrl, setWebViewUrl] = React.useState(Platform.OS == "ios" ? null : undefined);

  const snapPoints = useMemo(() => ["70%", "90%"], []);
  const bottomSheetRef = useRef(null);

  useEffect(() => {
    if (webViewUrl) {
      bottomSheetRef.current?.expand();
    } else {
      bottomSheetRef.current?.close();
    }
  }, [webViewUrl]);

  const handleCloseWebView = (url) => {
    if (url?.includes("minuit.starter")) {
      setWebViewUrl(Platform.OS == "ios" ? null : undefined); // Réinitialiser l'URL
      bottomSheetRef.current?.close(); // Fermer la BottomSheet
    }
  };

  const docExtensionList = [".docx", ".doc", ".xlsx", ".xls", ".pptx", ".ppt"];
  const isOfficeDoc = docExtensionList.some((ext) =>
    webViewUrl?.toLowerCase()?.includes(ext)
  );

  const dynamicWebViewUrl = isOfficeDoc
    ? `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(
        webViewUrl
      )}`
    : webViewUrl;

  return (
    <WebViewContext.Provider value={{ webViewUrl, setWebViewUrl }}>
      {children}

      <BottomSheetContainer
        bottomSheetRef={bottomSheetRef}
        snapPoints={snapPoints}
        onChange={(index) => {
          if (index === -1) {
            setWebViewUrl(Platform.OS == "ios" ? null : undefined);
          }
        }}
        index={-1}
        enablePanDownToClose
      >
        <WebView
          style={{
            flex: 1,
            backgroundColor: Palette.darkPurple,
            borderWidth: 0,
          }}
          source={{ uri: dynamicWebViewUrl }}
          onNavigationStateChange={(event) => handleCloseWebView(event.url)}
        />
      </BottomSheetContainer>
    </WebViewContext.Provider>
  );
};

export const useWebView = () => useContext(WebViewContext);
