import React from 'react';
import { TouchableOpacity, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import CustomText from '../CustomText/index';
import styles from './styles';
import { Color } from '../../config/Color';

export default function Tag(props) {
     const {
          style,
          textStyle,
          icon,
          primary,
          primaryIcon,
          outline,
          outlineIcon,
          outlineSecondary,
          outlineSecondaryIcon,
          small,
          light,
          gray,
          chip,
          status,
          rate,
          rateSmall,
          sale,
          children,
          ...rest
     } = props;

     return (
          <TouchableOpacity
               {...rest}
               style={StyleSheet.flatten([
                    styles.default,
                    primary && [styles.primary, { backgroundColor: Color.primaryColor }],
                    primaryIcon && styles.primary,
                    outline && [
                         styles.outline,
                         { borderColor: Color.primary, backgroundColor: Color.cardBackgroundColor },
                    ],
                    outlineIcon && styles.outline,
                    outlineSecondary && styles.outlineSecondary,
                    outlineSecondaryIcon && [
                         styles.outlineSecondary,
                         { borderColor: Color.accentColor },
                    ],
                    small && [styles.small, { backgroundColor: Color.primaryColor }],
                    light && [styles.light, { backgroundColor: Color.primaryColor }],
                    gray && styles.gray,
                    chip && [
                         styles.chip,
                         { backgroundColor: Color.card, borderColor: Color.accentColor },
                    ],
                    status && [styles.status, { backgroundColor: Color.primaryColor }],
                    rate && [styles.rate, { backgroundColor: Color.primaryLightColor }],
                    rateSmall && [styles.rateSmall, { backgroundColor: Color.primaryLightColor }],
                    sale && [styles.sale, { backgroundColor: Color.primaryLightColor }],
                    style,
               ])}
               activeOpacity={0.9}>
               {icon ? icon : null}
               <CustomText
                    style={StyleSheet.flatten([
                         primary && styles.textPrimary,
                         primaryIcon && styles.textPrimary,
                         outline && [styles.textOutline, { color: Color.primaryColor }],
                         outlineIcon && [styles.textOutline, { color: Color.primaryColor }],
                         outlineSecondary && [
                              styles.textOutlineSecondary,
                              { color: Color.accentColor },
                         ],
                         outlineSecondaryIcon && [
                              styles.textOutlineSecondary,
                              { color: Color.accentColor },
                         ],
                         small && styles.textSmall,
                         light && [styles.textLight, { color: Color.primaryLightColor }],
                         gray && styles.textGray,
                         chip && [styles.textChip, { color: Color.accentColor }],
                         status && styles.textStatus,
                         rate && styles.textRate,
                         rateSmall && styles.textRateSmall,
                         sale && styles.textSale,
                         textStyle,
                    ])}
                    numberOfLines={1}>
                    {children || ''}
               </CustomText>
          </TouchableOpacity>
     );
}

Tag.propTypes = {
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     icon: PropTypes.node,
     primary: PropTypes.bool,
     primaryIcon: PropTypes.bool,
     outline: PropTypes.bool,
     outlineIcon: PropTypes.bool,
     outlineSecondary: PropTypes.bool,
     outlineSecondaryIcon: PropTypes.bool,
     small: PropTypes.bool,
     light: PropTypes.bool,
     gray: PropTypes.bool,
     chip: PropTypes.bool,
     rate: PropTypes.bool,
     rateSmall: PropTypes.bool,
     status: PropTypes.bool,
     sale: PropTypes.bool,
};

Tag.defaultProps = {
     style: {},
     textStyle: {},
     icon: null,
     primary: false,
     primaryIcon: false,
     outline: false,
     outlineIcon: false,
     outlineSecondary: false,
     outlineSecondaryIcon: false,
     small: false,
     light: false,
     gray: false,
     chip: false,
     status: false,
     rate: false,
     rateSmall: false,
     sale: false,
};
