import React, { ReactNode } from 'react';
import type { GestureResponderEvent } from 'react-native';
import type { ResponsiveValue } from '@shopify/restyle';
import { Warning } from 'phosphor-react-native';
import { TouchableComponent } from '../TouchableComponent';
import type { Theme } from '../../theme/theme';
import { useTheme } from '../../theme/ThemeProvider';
import { Box } from '../Box';
import { Text } from '../Text';

interface CardProps {
  customComponent?: ReactNode;
  iconAlign?: 'center' | 'flex-end' | 'flex-start';
  subtitle?: string;
  subtitleColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
  subtitleVariant?: ResponsiveValue<keyof Theme['textVariants'], Theme>;
  subtitleWeight?: 'regular' | 'bold';
  title?: string;
  titleColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
  titleVariant?: ResponsiveValue<keyof Theme['textVariants'], Theme>;
  titleWeight?: 'regular' | 'bold';
  type: 'success' | 'danger' | 'warning';
}

type Props = React.ComponentProps<typeof TouchableComponent> &
  CardProps & {
    backgroundColor?: string;
    bg?: string;
    onLongPress?: (event: GestureResponderEvent) => void;
    onPress?: (event: GestureResponderEvent) => void;
  };

/**
 *
 * @example
 * ### CardAlert - success | danger | warning
 *
 * ```js
 * <CardAlert
 *   type="success"
 *   title="Lorem ipsum, dolor sit amet"
 *   subtitle="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum minus eos dolor laudantium perspiciatis amet fugiat unde ipsam veritatis?"
 * />
 * ```
 *
 */
export const CardAlert = ({
  backgroundColor = 'white',
  bg,
  customComponent,
  iconAlign = 'center',
  onLongPress,
  onPress,
  subtitle,
  subtitleColor,
  subtitleVariant = 'label',
  subtitleWeight = 'regular',
  title,
  titleColor,
  titleVariant = 'body',
  titleWeight = 'bold',
  type,
  ...props
}: Props) => {
  const { colors, fonts } = useTheme();

  let color: ResponsiveValue<keyof Theme['colors'], Theme>;
  let iconColor: string | undefined;

  switch (type) {
    case 'success':
      color = 'blueJeans';
      iconColor = colors.blueJeans;
      break;
    case 'danger':
      color = 'chiperBrandRed';
      iconColor = colors.chiperBrandRed;
      break;
    case 'warning':
      color = 'brightYellow';
      iconColor = colors.brightYellow;
      break;
  }

  const CardAlertComponent = () => {
    return (
      <Box
        width="100%"
        flexDirection="row"
        alignItems="center"
        padding="spacing-s"
        borderLeftColor={color}
        borderLeftWidth={4}
        borderRadius={4}
        {...props}
        {...{ bg, backgroundColor }}
      >
        <Box alignSelf={iconAlign} marginRight="spacing-s">
          <Warning size={24} weight="fill" color={iconColor} />
        </Box>
        <Box flex={1}>
          {!!title && (
            <Text
              variant={titleVariant}
              color={titleColor}
              fontFamily={
                titleWeight === 'bold'
                  ? fonts.caustenRoundBold
                  : fonts.caustenRoundRegular
              }
            >
              {title}
            </Text>
          )}

          {!!subtitle && (
            <Text
              variant={subtitleVariant}
              color={subtitleColor}
              fontFamily={
                subtitleWeight === 'bold'
                  ? fonts.caustenRoundBold
                  : fonts.caustenRoundRegular
              }
            >
              {subtitle}
            </Text>
          )}

          {!!customComponent && <Box flex={1}>{customComponent}</Box>}
        </Box>
      </Box>
    );
  };

  if (onPress || onLongPress) {
    return (
      <TouchableComponent width="100%" {...{ onPress, onLongPress }}>
        <CardAlertComponent />
      </TouchableComponent>
    );
  }

  return <CardAlertComponent />;
};