import React, { FC, useContext } from 'react';
import { View, StyleSheet } from 'react-native';
import { TagProps } from './types';
import { Colors, Radius, Spacing } from '../Consts';
import { Icon } from '../Icon';
import { Text, useScaleSize } from '../Text';
import { useComponentId } from '../Application';
import { MiniAppContext } from '../Context';

const backgroundColor = {
  default: Colors.black_04,
  orange: Colors.orange_08,
  green: Colors.green_08,
  red: Colors.red_08,
  blue: Colors.blue_08,
  grey: Colors.black_04,
};

const textColor = {
  default: Colors.black_17,
  orange: Colors.orange_03,
  green: Colors.green_03,
  red: Colors.red_03,
  blue: Colors.blue_03,
  grey: Colors.black_12,
};

const Tag: FC<TagProps> = ({
  label = 'Label',
  icon,
  color = 'default',
  size = 'large',
  style,
  customColor,
  accessibilityLabel,
}) => {
  const context = useContext<any>(MiniAppContext);
  const scaledHeight24 = useScaleSize(24);
  const scaledHeight18 = useScaleSize(18);

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  const styles = StyleSheet.create({
    container: {
      paddingHorizontal: Spacing.S,
      borderRadius: Radius.S,
      flexDirection: 'row',
      height: scaledHeight24,
      alignItems: 'center',
      justifyContent: 'center',
    },
    mediumContainer: {
      paddingHorizontal: Spacing.S,
      borderRadius: Radius.S,
      height: scaledHeight18,
      alignItems: 'center',
      flexDirection: 'row',
      justifyContent: 'center',
    },
    icon: {
      marginRight: Spacing.XS,
    },
    debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
  });

  let labelColor = textColor[color];
  let tagColor = backgroundColor[color];
  let sizeStyle = styles.mediumContainer;
  const componentName = 'Tag';

  const { componentId } = useComponentId(
    `${componentName}/${label}`,
    accessibilityLabel,
  );
  //Check if custom color is [color]_03 (only check in dev mode)
  const validateCustomColor = (color: string) => {
    if (__DEV__) {
      const colorCore: { [key: string]: string } = Colors;
      const primaryColors = Object.keys(Colors)
        .map(i => {
          if (i.includes('_03')) {
            return colorCore[i];
          }
        })
        .filter(color => color);
      return primaryColors.includes(color);
    }
    return true;
  };

  if (size === 'large') {
    sizeStyle = styles.container;
  }
  if (customColor && validateCustomColor(customColor)) {
    labelColor = Colors.black_01;
    tagColor = customColor;
  }

  return (
    <View
      style={[
        style,
        sizeStyle,
        { backgroundColor: tagColor },
        showBaseLineDebug && styles.debugBaseLine,
      ]}
      accessibilityLabel={componentId}
    >
      {!!icon && (
        <Icon
          style={styles.icon}
          size={16}
          source={icon as string}
          color={labelColor}
        />
      )}
      <Text
        color={labelColor}
        typography={'label_s_medium'}
        accessibilityLabel={`${componentId}|text`}
      >
        {label}
      </Text>
    </View>
  );
};

export { Tag };