import React from 'react';
import { StatusBar } from 'react-native';

type TProps = {
  defaultLightContent?: boolean;
  isReverted?: boolean;
};

export const CustomedStatusBar: React.FC<TProps> = props => {
  const { defaultLightContent, isReverted } = props;
  // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions
  // https://medium.com/codespace69/typescript-type-string-is-not-assignable-to-type-f2fc05e7a913
  const contentStyles = ['light-content', 'dark-content'] as const;
  const backgroundColors = ['black', 'white'];
  const defaultIndex = isReverted ? 1 : 0;
  const revertedIndex = isReverted ? 0 : 1;

  const barStyle = defaultLightContent
    ? contentStyles[defaultIndex]
    : contentStyles[revertedIndex];

  const backgroundColor = defaultLightContent
    ? backgroundColors[defaultIndex]
    : backgroundColors[revertedIndex];

  return (
    <StatusBar
      barStyle={barStyle}
      translucent
      backgroundColor={backgroundColor}
    />
  );
};

CustomedStatusBar.defaultProps = {
  defaultLightContent: true,
  isReverted: false,
};