import React, { ReactElement } from 'react';
import { Text, HStack, IToastProps, InfoIcon } from 'native-base';
import { ErrorIcon, SuccessIcon, WarningIcon } from './Icons';
import Card from './Card';
import { COLORS } from '../../theme';

export enum AlertType {
  Success = 'Success',
  Warning = 'Warning',
  Error = 'Error',
  Info = 'Info',
}

type IconMapping = {
  [key in keyof typeof AlertType]: ReactElement;
};

export const ICON_MAPPING: IconMapping = {
  Success: <SuccessIcon size={20} />,
  Warning: <WarningIcon size={20} />,
  Error: <ErrorIcon size={20} />,
  Info: <InfoIcon size={20} />,
} as const;

type ToastProps = {
  type: AlertType;
  label: string;
};

/**
 * Create toast props
 * @returns toast props
 */
export const createToastProps = (
  type: ToastProps['type'],
  label: ToastProps['label'],
): IToastProps => ({
  placement: 'bottom-right',
  duration: 4000,
  render: () => <Toast type={type} label={label} />,
});

const Toast = ({ type, label }: ToastProps) => {
  return (
    <Card
      className="z-10 mr-4 p-3"
      shadow="none"
      bg={COLORS.gray[100]}
      _dark={{ bg: COLORS.gray[700] }}
    >
      <HStack className="gap-x-3">
        <Text>{label}</Text>
        {ICON_MAPPING[type]}
      </HStack>
    </Card>
  );
};
