import {Alert, CloseIcon, useToast} from '@gluestack-ui/themed';
import {HStack} from '@gluestack-ui/themed';
import {Text} from '@gluestack-ui/themed';
import {VStack} from '@gluestack-ui/themed';
import {AlertIcon} from '@gluestack-ui/themed';
import {MyButton} from './MyButton';

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;
  action?: 'info' | 'error' | 'success' | 'warning' | 'muted' | undefined;
  variant: 'solid' | 'outline' | 'accent' | undefined;
  title: any;
  description: any;
  isClosable?: boolean;
  rest: any;
}

interface alertType extends toastType {
  id: string;
}

function showToast(toast: any, item: toastType) {
  const ToastAlert = ({
    id,
    action,
    variant,
    title,
    description,
    isClosable,
    rest,
  }: alertType) => (
    <Alert
      maxWidth="95%"
      alignSelf="center"
      flexDirection="row"
      action={action}
      variant={variant}
      {...rest}>
      <VStack space="xs" flexShrink={1} w="100%">
        <HStack
          flexShrink={1}
          alignItems="center"
          justifyContent="space-between">
          <HStack space="sm" flexShrink={1} alignItems="center">
            <AlertIcon />
            <Text
              fontWeight="medium"
              flexShrink={1}
              color={
                variant === 'solid'
                  ? '$white'
                  : variant !== 'outline'
                  ? '$black'
                  : null
              }>
              {title}
            </Text>
          </HStack>
          {isClosable ? (
            <MyButton
              type="secondary"
              text="X"
              onPress={() => toast.close(id)}
            />
          ) : /*<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'
              ? '$white'
              : variant !== 'outline'
              ? '$black'
              : null
          }>
          {description}
        </Text>
      </VStack>
    </Alert>
  );

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

export default showToast;
