Untitled

import React from 'react';
import { XStack, YStack, isWeb, useMedia } from 'tamagui';
import { Toast } from '@tamagui/toast';
import {
  AlertCircle,
  XCircle,
  CheckCircle2,
  Info,
  X,
} from '@tamagui/lucide-icons';
import { BaseButton } from './BaseButton';
import { useAnalytics } from '../../providers/Singletons/analytics';
import { useToast } from '../../providers/Singletons/toast';

export type ToastType = 'success' | 'alert' | 'warning' | 'info';

const StyledToast = () => {
  const media = useMedia();
  const { platform } = useAnalytics();
  const { toast, hideToast } = useToast();

  console.log('Toast State:', toast);

  const getToastStyle = () => {
    switch (toast.type) {
      case 'success':
        return {
          borderColor: '#4bdc06',
          icon: <CheckCircle2 size={'$4.5'} color="#4bdc06" />,
        };
      case 'alert':
        return {
          borderColor: '#ffba00',
          icon: <AlertCircle size={'$4.5'} color="#ffba00" />,
        };
      case 'warning':
        return {
          borderColor: '#ef4444',
          icon: <XCircle size={'$4.5'} color="#ef4444" />,
        };
      case 'info':
        return {
          borderColor: '#7756fc',
          icon: <Info size={'$4.5'} color="#7756fc" />,
        };
      default:
        return {
          borderColor: '#7756fc',
          icon: <Info size={'$4.5'} color="#7756fc" />,
        };
    }
  };

  const { borderColor, icon } = getToastStyle();

  return (
    <YStack display="flex" justifyContent="center" alignSelf="center">
      <Toast
        open={toast.visible}
        justifyContent="center"
        enterStyle={{ x: -20, opacity: 0 }}
        exitStyle={{ x: -20, opacity: 0 }}
        opacity={1}
        x={0}
        unstyled
        style={
          isWeb
            ? {
                backgroundColor: 'white',
                borderRadius: 12,
                padding: 10,
                borderColor: borderColor,
                borderWidth: '$0.25',
                width: media.sm ? '80vw' : '50vw',
                height: 'auto',
              }
            : {
                backgroundColor: 'white',
                borderRadius: 12,
                padding: 16,
                borderColor: borderColor,
                borderWidth: 2,
                width: '80%',
                left: '10%',
                top: 50,
                position: 'absolute',
                height: 'auto',
              }
        }
      >
        <XStack
          display="flex"
          space
          position="relative"
          justifyContent="center"
          alignItems="center"
        >
          <BaseButton
            buttonvariant="blank"
            size={'$4'}
            position="absolute"
            right={2}
            top={2}
            zIndex={10}
            circular
            icon={<X size={'$4'} />}
            onPress={hideToast}
          />
          {icon && (
            <XStack
              borderColor={borderColor}
              style={{
                alignSelf: 'flex-start',
              }}
            >
              {icon}
            </XStack>
          )}
          <YStack width={'90%'}>
            <Toast.Description
              style={{
                display: 'flex',
                flexDirection: 'column',
                flexGrow: 1,
                flexShrink: 1,
                width: platform === 'ios' || media.sm ? '85%' : '88%',
                color: 'black',
                flexWrap: 'wrap',
              }}
            >
              {toast.message}
            </Toast.Description>
          </YStack>
        </XStack>
      </Toast>
    </YStack>
  );
};

export { StyledToast };