import React, { ComponentProps } from 'react';
import * as Icons from 'phosphor-react-native';

import { Box } from '../Box';
import { Text } from '../Text';

import { useTheme } from '../../theme/ThemeProvider';

import type { colors as themeColors } from '../../theme/theme';

const { IconContext, ...restIcons } = Icons;

const PhosphorIcons = { ...restIcons };

type InfoBarIcon = {
  name: keyof typeof PhosphorIcons;
  color?: keyof typeof themeColors;
  weight?: Icons.IconWeight;
};

type InfoBarProps = ComponentProps<typeof Box> & {
  message: string;
  icon?: InfoBarIcon;
};

/**
 * @message One-line descriptive message
 * @icon iIon type and styles settings
 * @see https://zeroheight.com/502cb86ad/p/86e920-information-bar/b/365199
 */

export const InfoBar: React.FC<InfoBarProps> = ({
  message,
  icon,
  ...rest
}: InfoBarProps) => {
  const { fonts, colors } = useTheme();

  const Icon: ({
    weight,
    color,
    size,
    style,
    mirrored,
  }: Icons.IconProps) => JSX.Element = icon
    ? Icons[icon.name]
    : Icons.AddressBook;

  return (
    <Box
      justifyContent={'center'}
      alignItems={'center'}
      bg={'yankeesBlue'}
      px={'spacing-m'}
      py={'spacing-xs'}
      flexDirection={'row'}
      {...rest}
    >
      {icon && (
        <IconContext.Provider
          value={{
            color: icon?.color ? colors[icon.color] : colors.white,
            size: 24,
            weight: icon?.weight ?? 'regular',
          }}
        >
          <Box mr={'spacing-xs'}>
            <Icon />
          </Box>
        </IconContext.Provider>
      )}
      <Text
        fontFamily={fonts.caustenRoundRegular}
        fontSize={12}
        numberOfLines={1}
        color={'white'}
      >
        {message}
      </Text>
    </Box>
  );
};