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)