import React, { ReactNode } from 'react';
import { theme } from '../../theme/theme';
import { Icon } from './Icon';
import type { AlertTypes } from './alert';
import { Text } from '../Text';
import { Box, BoxProps } from '../Box';
import { TouchableComponent } from '../TouchableComponent';
import { ToastAction } from './components/ToastAction';

export interface IAlertComponentProps {
  message: string | JSX.Element;
  subMessage?: string | JSX.Element;
  icon?: JSX.Element;
  data?: {
    subTitle?: string | JSX.Element;
    labelButton?: string;
    closeToast?: () => void;
    onPressButton?: () => void;
  };
  type?: AlertTypes;
  onPress?: () => void;
}

type ContainerProps = { children: ReactNode; onPress?: () => void } & BoxProps;

const Container = ({ children, ...props }: ContainerProps) =>
  props.onPress ? (
    <TouchableComponent {...props}>{children}</TouchableComponent>
  ) : (
    <Box {...props}>{children}</Box>
  );

export const AlertTop = ({
  message,
  subMessage,
  icon,
  type,
  data,
  onPress,
}: IAlertComponentProps) => {
  const { fonts } = theme;
  const { subTitle, labelButton, closeToast, onPressButton } = data || {};
  const isToastAction = type === 'action';
  if (isToastAction) {
    return (
      <ToastAction
        type="success"
        icon={icon}
        title={message}
        labelButton={labelButton}
        subTitle={subTitle}
        onPressButton={onPressButton}
        closeToast={closeToast}
      />
    );
  }
  return (
    <Container
      onPress={onPress}
      backgroundColor="yankeesBlue"
      borderRadius={8}
      width="100%"
      maxWidth="85%"
      marginVertical="spacing-xxs"
      padding="spacing-s"
      flexDirection="row"
      alignItems="flex-start"
    >
      {(!!icon || type) && <Icon icon={icon} type={type} />}
      <Box flex={1}>
        <Text
          fontFamily={fonts.caustenRoundRegular}
          fontWeight="400"
          marginRight="spacing-xs"
          fontSize={16}
          color="white"
        >
          {message}
        </Text>
        {subMessage && (
          <Text
            fontFamily={fonts.caustenRoundRegular}
            fontWeight="700"
            marginRight="spacing-xs"
            fontSize={16}
            color="white"
          >
            {subMessage}
          </Text>
        )}
      </Box>
    </Container>
  );
};