// Alert component
import React from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'
import { MaterialIcons } from '@expo/vector-icons'
import { colors, spacing } from '../theme'
import Text from './Text'
const Alert = ({
  title,
  style,
  type = 'error',
  children,
  titleStyle,
  textStyle,
  variant = 'default', // default, outline, filled
  icon,

  m,
  mx,
  my,
  mt,
  mb,
  ml,
  mr,
  p = spacing.s_3,
  px,
  py,
  pt,
  pb,
  pl,
  pr,
  ...props
}) => {
  const marginPaddingStyles = {
    margin: m,
    marginHorizontal: mx,
    marginVertical: my,
    marginTop: mt,
    marginBottom: mb,
    marginLeft: ml,
    marginRight: mr,
    padding: p,
    paddingHorizontal: px,
    paddingVertical: py,
    paddingTop: pt,
    paddingBottom: pb,
    paddingLeft: pl,
    paddingRight: pr,
  }
  return (
    <View
      style={[
        styles.defaultContainer,
        style,
        type === 'error' && styles.errorContainer,
        type === 'success' && styles.successContainer,
        type === 'warning' && styles.warningContainer,
        type === 'info' && styles.infoContainer,
        variant === 'outline' && {
          backgroundColor: 'transparent',
          borderWidth: 1,
          borderColor: colors.n_200,
        },
        variant === 'filled' && {
          backgroundColor: colors.n_200,
        },
        marginPaddingStyles,
      ]}
    >
      <MaterialIcons
        name={
          type == 'error'
            ? 'error'
            : type == 'success'
            ? 'check'
            : type == 'warning'
            ? 'warning'
            : 'info'
        }
        size={24}
        color={
          type === 'error'
            ? colors.error
            : type === 'success'
            ? colors.success
            : type === 'warning'
            ? colors.warning
            : type === 'info'
            ? colors.info
            : colors.n_900
        }
      />
      <View
        style={{
          marginLeft: spacing.s_2,
        }}
      >
        {title && (
          <Text
            type='h4'
            weight='bold'
            style={[
              styles.defaultText,
              {
                color:
                  type === 'error'
                    ? colors.error
                    : type === 'success'
                    ? colors.success
                    : type === 'warning'
                    ? colors.warning
                    : type === 'info'
                    ? colors.info
                    : colors.n_900,
              },
              titleStyle,
            ]}
          >
            {title}
          </Text>
        )}
        <Text
          style={[
            styles.text,
            type === 'error' && styles.errorText,
            type === 'success' && styles.successText,
            type === 'warning' && styles.warningText,
            type === 'info' && styles.infoText,
            {
              alignItems: title ? 'flex-start' : 'center',
            },
            textStyle,
          ]}
          {...props}
        >
          {children}
        </Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  defaultContainer: {
    backgroundColor: colors.n_100,
    borderRadius: 8,
    padding: spacing.s_3,
    width: '100%',
    marginVertical: spacing.s_2,
    flexDirection: 'row',
  },

  errorContainer: {
    backgroundColor: colors.e_100,
  },
  successContainer: {
    backgroundColor: colors.s_100,
  },
  warningContainer: {
    backgroundColor: colors.w_100,
  },
  infoContainer: {
    backgroundColor: colors.i_100,
  },

  defaultText: {
    color: colors.n_900,
  },
  errorText: {
    color: colors.e_900,
  },
  successText: {
    color: colors.s_900,
  },
  warningText: {
    color: colors.w_900,
  },
  infoText: {
    color: colors.i_900,
  },
})

export default Alert