import { Toast, useToastState } from "@tamagui/toast";
import { wp } from "@/utils/ui/screenUtils";
import { XStack, YStack, Image } from "tamagui";

const TOAST_CONFIG_SUCCESS = {
  iconSource: require('@/assets/images/icon/toast/success.png'),
  bgColor: '#EEF7F2',
  borderColor: '#CFE1D9',
};
const TOAST_CONFIG_ERROR = {
  iconSource: require('@/assets/images/icon/toast/error.png'),
  bgColor: '#FBEEF0',
  borderColor: '#E7D1D8',
};
const TOAST_CONFIG_WARNING = {
  iconSource: require('@/assets/images/icon/toast/warning.png'),
  bgColor: '#FDF7ED',
  borderColor: '#F7E0B3',
};
const TOAST_CONFIG_DEFAULT = {
  iconSource: require('@/assets/images/icon/toast/warning.png'),
};
const TOAST_CONFIG_MAP = {
  success: TOAST_CONFIG_SUCCESS,
  error: TOAST_CONFIG_ERROR,
  warning: TOAST_CONFIG_WARNING,
};
const TOAST_SHADOW_OFFSET = { width: wp(0), height: wp(2) };
const TOAST_ENTER_STYLE = { opacity: 0, scale: 0.9, y: wp(-20) };
const TOAST_EXIT_STYLE = { opacity: 0, scale: 0.95, y: wp(-10) };

export const CustomToast = (props) => {
  const toast = useToastState();
  if (!toast || toast.isHandledNatively) return null;
  const type = toast.customData?.type || 'success';
  const config = TOAST_CONFIG_MAP[type] || TOAST_CONFIG_DEFAULT;
  return (
    <Toast
      key={toast.id}
      duration={toast.duration}
      backgroundColor={config.bgColor}
      borderRadius={wp(10)}
      padding={wp(12)}
      shadowColor="#000000"
      shadowOffset={TOAST_SHADOW_OFFSET}
      shadowOpacity={0.1}
      shadowRadius={wp(8)}
      elevation={wp(3)}
      borderWidth={wp(1)}
      borderColor={config.borderColor}
      width={wp(320)}
      y={wp(15)}
      animation="quick"
      enterStyle={TOAST_ENTER_STYLE}
      exitStyle={TOAST_EXIT_STYLE}
      style={{ renderToHardwareTextureAndroid: true, shouldRasterizeIOS: true }}
      {...props}
    >
    <XStack alignItems="center" gap={wp(10)} >
      <Image 
        source={config.iconSource}
        width={wp(24)}
        height={wp(24)}
      />
      <YStack flex={1}>
        {toast.message && (
          <Toast.Description
            fontSize={wp(13)}
            color="#000"
            lineHeight={wp(18)}
          >
            {toast.message}
          </Toast.Description>
        )}
      </YStack>
    </XStack>
    </Toast>
  );
};
