import {
  Alert,
  Button,
  Center,
  CloseIcon,
  HStack,
  IconButton,
  Text,
  VStack,
} from 'native-base';
import {ResponsiveValue} from 'native-base/lib/typescript/components/types';

const {useToast} = require('native-base');

const Toast = () => {
  const toast = useToast();
  const ToastDetails = [
    {
      title: 'Account verified',
      variant: 'solid',
      description: 'Thanks for signing up with us.',
      isClosable: true,
    },
    {
      title: 'Something went wrong',
      variant: 'subtle',
      description: 'Please create a support ticket from the support page',
    },
    {
      title: 'Network connection restored',
      variant: 'left-accent',
      description:
        'This is to inform you that your network connectivity is restored',
      isClosable: true,
    },
    {
      title: 'Invalid email address',
      variant: 'top-accent',
      description: 'Please enter a valid email address',
    },
    {
      title: 'Invalid email address',
      variant: 'outline',
      description: 'Please enter a valid email address',
    },
  ];
};

interface toastType {
  id?: string;
  status?: 'info' | (string & {}) | 'error' | 'success' | 'warning';
  variant: ResponsiveValue<
    | 'subtle'
    | 'solid'
    | 'left-accent'
    | 'top-accent'
    | 'outline'
    | 'outline-light'
    | (string & {})
  >;
  title: any;
  description: any;
  isClosable?: boolean;
  rest: any;
}

interface alertType extends toastType {
  id: string;
}

function showToast(toast: any, item: toastType) {
  const ToastAlert = ({
    id,
    status,
    variant,
    title,
    description,
    isClosable,
    rest,
  }: alertType) => (
    <Alert
      maxWidth="95%"
      alignSelf="center"
      flexDirection="row"
      status={status ? status : 'info'}
      variant={variant}
      {...rest}>
      <VStack space={1} flexShrink={1} w="100%">
        <HStack
          flexShrink={1}
          alignItems="center"
          justifyContent="space-between">
          <HStack space={2} flexShrink={1} alignItems="center">
            <Alert.Icon />
            <Text
              fontSize="md"
              fontWeight="medium"
              flexShrink={1}
              color={
                variant === 'solid'
                  ? 'lightText'
                  : variant !== 'outline'
                  ? 'darkText'
                  : null
              }>
              {title}
            </Text>
          </HStack>
          {isClosable ? (
            <IconButton
              variant="unstyled"
              icon={<CloseIcon size="3" />}
              _icon={{
                color: variant === 'solid' ? 'lightText' : 'darkText',
              }}
              onPress={() => toast.close(id)}
            />
          ) : null}
        </HStack>
        <Text
          px="6"
          color={
            variant === 'solid'
              ? 'lightText'
              : variant !== 'outline'
              ? 'darkText'
              : null
          }>
          {description}
        </Text>
      </VStack>
    </Alert>
  );

  toast.show({
    render: ({id}: {id: string}) => {
      return <ToastAlert id={id} {...item} />;
    },
  });
}

export default showToast;
