import { View, Text, TouchableOpacity } from 'react-native';
import React, { ReactNode } from 'react';
import { ViewProps } from 'react-native';
import { classNames } from '../utils';

export enum SnackbarTypeEnum {
  SUCCESS = 'SUCCESS',
  ERROR = 'ERROR',
  WARNING = 'WARNING',
  INFO = 'INFO',
}

export interface SnackbarProps extends ViewProps {
  type: string;
  message: string;
  rightText?: string;
  accessoryLeft?: ReactNode;
  accessoryRight?: ReactNode;
  onPress?: () => void;
}

export const Snackbar: React.FC<SnackbarProps> = ({
  type = SnackbarTypeEnum.INFO,
  message = 'message for user',
  rightText,
  accessoryLeft,
  accessoryRight,
  onPress,
  className,
  ...restOfProps
}) => {
  const getBackgroundColor = () => {
    switch (type) {
      case SnackbarTypeEnum.SUCCESS:
        return 'bg-success-50';
      case SnackbarTypeEnum.ERROR:
        return 'bg-error-50';
      case SnackbarTypeEnum.WARNING:
        return 'bg-warning-50';
      default:
        return 'bg-info-50';
    }
  };

  return (
    <View
      className={classNames(
        'p-4 rounded-2xl flex flex-row items-center justify-between shadow-md',
        `${getBackgroundColor()}`,
        `${className}`
      )}
      {...restOfProps}
    >
      <View className="mr-2">{accessoryLeft}</View>
      <Text className="mr-auto font-poppins-medium text-medium-paragraph flex-1">
        {message}
      </Text>
      <TouchableOpacity
        className="flex flex-row items-center ml-2"
        onPress={() => onPress?.()}
      >
        <Text className="font-poppins-medium text-small-paragraph">
          {rightText}
        </Text>
        <View className="ml-2">{accessoryRight}</View>
      </TouchableOpacity>
    </View>
  );
};