import React, { createContext, ReactNode, useContext } from 'react'
import { StyleProp, ViewStyle, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

import { colors } from '../Colors'

interface Props {
  screenName?: string
  topColor?: string
  style?: StyleProp<ViewStyle>
}

export const CommonScreenContainer: React.FC<Props> = ({
  screenName,
  topColor = colors.black,
  style,
  children,
}) => {
  const insets = useSafeAreaInsets()

  return (
    <ScreenNameContextProvider screenName={screenName}>
      <View
        style={[
          {
            flex: 1,
            backgroundColor: topColor,
            paddingTop: insets.top,
            paddingBottom: 0,
          },
          style,
        ]}
      >
        {children}
      </View>
    </ScreenNameContextProvider>
  )
}

const ScreenNameContext = createContext<{ screenName?: string }>({
  screenName: undefined,
})

export const ScreenNameContextProvider = ({
  children,
  screenName,
}: {
  children: ReactNode
  screenName?: string
}) => {
  return (
    <ScreenNameContext.Provider value={{ screenName }}>
      {children}
    </ScreenNameContext.Provider>
  )
}

export const useScreenName = () => useContext(ScreenNameContext)