import React, {FC, ReactNode, useEffect} from 'react';
import {Dimensions, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
import {ColorsScheme, useTheme} from '../../theme/ThemeContext';
import PlayyText from '../PlayyText/PlayyText';

const {width} = Dimensions.get('screen');

interface HeaderProps {
  children: ReactNode;
  statusBarValue?: number;
  style?: StyleProp<ViewStyle>;
  showPrompt?: string;
}

interface HeaderContextType {
  colors: ColorsScheme;
}

const HeaderContext = React.createContext<HeaderContextType | null>(null);

export const useHeaderContext = () => {
  const context = React.useContext(HeaderContext);
  if (!context) {
    throw new Error('Header subcomponents must be used within Header');
  }
  return context;
};

const Header: FC<HeaderProps> = ({
  children,
  statusBarValue = 0,
  style,
  showPrompt,
}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors);

  return (
    <HeaderContext.Provider value={{colors}}>
      <View style={[styles.header, {paddingTop: statusBarValue}, style]}>
        {showPrompt && (
          <PlayyText
            FootnoteRegular
            style={{textAlign: 'center'}}
            color={colors.labels_primary}>
            {showPrompt}
          </PlayyText>
        )}
        {children}
      </View>
    </HeaderContext.Provider>
  );
};

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    header: {
      display: 'flex',
      width: width,
      backgroundColor: colors.background_primary,
    },
  });

export default Header;