import React from 'react';
import { Platform, StyleSheet, View, ViewStyle } from 'react-native';
import {
  DEFAULT_BANNER_AUTO_HIDE_TIMEOUT,
  useAutoHideBannerEffect,
  useBanner,
  useStyles,
} from '../../hooks';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { LLChatBannerItem, LLChatBannerItemProps } from './LLChatBannerItem';

export type LLChatBannerStyles = {
  bannerContainer: ViewStyle;
};

export type LLChatBannerProps = ComponentStyleProp<LLChatBannerStyles> & {
  bannerAutoHideTimeout?: number;
  BannerItemComponent?: typeof LLChatBannerItem;
  BannerItemComponentStyles?: LLChatBannerItemProps['styles'];
};

export function LLChatBanner({
  styles: stylesProp,
  bannerAutoHideTimeout = DEFAULT_BANNER_AUTO_HIDE_TIMEOUT,
  BannerItemComponent = LLChatBannerItem,
}: LLChatBannerProps) {
  const bannerStyles = useStyles({
    componentStylesFn: getAppBannerStyles,
    stylesProp,
  });
  const { banners } = useBanner();
  useAutoHideBannerEffect({
    bannerAutoHideTimeout,
  });

  return (
    <View style={bannerStyles.bannerContainer}>
      {banners.map((item) => (
        <BannerItemComponent key={item.id} {...item} />
      ))}
    </View>
  );
}

const getAppBannerStyles: LLComponentStyleFn<LLChatBannerStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    bannerContainer: {
      display: 'flex',
      flexDirection: 'column',
      position: 'absolute',
      top: Platform.OS === 'ios' ? 50 : 70,
      left: 12,
      backgroundColor: 'transparent',
      marginBottom: 15,
      zIndex: 1,
    },
  });