import React, { useMemo } from 'react';
import { StyleSheet, View, TextStyle, ViewStyle } from 'react-native';
import { useStyles, useTheme } from '../../hooks';
import {
  BannerType,
  ComponentStyleProp,
  LLComponentStyleFn,
} from '../../types';
import { LLText } from '../LLText';

export type LLChatBannerItemStyles = {
  itemContainer: ViewStyle;
  bannerIndicator: ViewStyle;
  bannerText: TextStyle;
};

export type LLChatBannerItemProps =
  ComponentStyleProp<LLChatBannerItemStyles> & {
    message: string;
    type: BannerType;
  };

export function LLChatBannerItem({
  message,
  type,
  styles: stylesProp,
}: LLChatBannerItemProps) {
  const { theme } = useTheme();
  const bannerItemStyles = useStyles({
    componentStylesFn: getAppBannerItemStyles,
    stylesProp,
  });
  const themeIndicatorColor = useMemo(
    () => ({
      [BannerType.INFO]: theme.info,
      [BannerType.ERROR]: theme.error,
    }),
    [theme]
  );

  return (
    <View style={bannerItemStyles.itemContainer}>
      <View
        style={[
          { backgroundColor: themeIndicatorColor[type] },
          bannerItemStyles.bannerIndicator,
        ]}
      />
      <LLText style={bannerItemStyles.bannerText}>{message}</LLText>
    </View>
  );
}

const getAppBannerItemStyles: LLComponentStyleFn<LLChatBannerItemStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    itemContainer: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      height: 45,
      minWidth: 200,
      backgroundColor: theme.popoverBackground,
      marginBottom: 10,
    },
    bannerIndicator: {
      width: 5,
      height: '100%',
      marginRight: 10,
    },
    bannerText: {
      paddingRight: 10,
      color: theme.text,
    },
  });