import { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { layout, snackbarTexts } from './styles';
import { variants, innerBorders } from '../common/styles';
import type { ISnackbarProps } from './types';

export default function Snackbar(props: ISnackbarProps) {
  const {
    children,
    isNotClosable,
    style,
    textStyle,
    variant = 'primary',
  } = props;
  const [isVisible, setIsVisible] = useState(true);
  if (!isVisible) return null;
  return (
    <View
      style={StyleSheet.flatten([
        variants.basic,
        layout.container,
        variants[variant],
        style,
      ])}
    >
      <View
        style={StyleSheet.flatten([
          innerBorders.basic,
          layout.innerBorders,
          innerBorders[variant],
          style,
        ])}
      >
        {typeof children === 'string' ||
        typeof (children as string[])?.[0] === 'string' ? (
          <Text
            style={StyleSheet.flatten([
              snackbarTexts.basic,
              snackbarTexts[variant],
              textStyle,
            ])}
          >
            {children}
          </Text>
        ) : (
          children
        )}
        {!isNotClosable && (
          <Pressable onPress={() => setIsVisible(false)}>
            <Text style={snackbarTexts[variant]}>x</Text>
          </Pressable>
        )}
      </View>
    </View>
  );
}