import { VerifyTypeEnum } from '@bit-ui-libs/common';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { StyleProp, View, ViewStyle } from 'react-native';
import { Icon, Text } from '../../../components';
import { tw } from '../../../core';

interface VerifiedChipProps {
  type?: VerifyTypeEnum;
  style?: StyleProp<ViewStyle>;
}

/**
 * This component takes in an AssetStatus and computes for us -
 * whether or not this component should be visible and display a "verified" indicator
 */

const COLOR_BY_TYPE = {
  [VerifyTypeEnum.SELF_VERIFIED]: {
    backgroundColor: 'rgba(12, 196, 254, 0.1)',
    iconColor: '#0CC4FE',
    textColor: '#0CC4FE',
  },
  [VerifyTypeEnum.NOT_VERIFIED]: {
    backgroundColor: 'rgba(128, 195, 66, 0.1)',
    iconColor: '#0CC4FE',
    textColor: 'rgba(241, 241, 241, 0.5)',
  },
  [VerifyTypeEnum.OFFICIAL_REJECTED]: {
    backgroundColor: 'rgba(255, 0, 0,0.1)',
    iconColor: '#CC4848',
    textColor: '#CC4848',
  },
  [VerifyTypeEnum.OFFICIAL_VERIFIED]: {
    backgroundColor: 'rgba(128, 195, 66, 0.1)',
    iconColor: tw.color('bg-primary'),
    textColor: tw.color('bg-primary'),
  },
};

export function VerifiedChip(props: VerifiedChipProps) {
  const { t } = useTranslation();
  const type = props.type || VerifyTypeEnum.NOT_VERIFIED;
  const containerStyles = useMemo(
    () =>
      tw.style('rounded-full', {
        // These styles don't work in the switch statement, for some reason
        'px-0': type === VerifyTypeEnum.NOT_VERIFIED,
        'px-2': type !== VerifyTypeEnum.NOT_VERIFIED,
        hidden: type === VerifyTypeEnum.NOT_VERIFIED,
        backgroundColor: COLOR_BY_TYPE[type].backgroundColor,
      }),
    [type],
  );
  const iconColor = COLOR_BY_TYPE[type].iconColor;
  const iconStyle = tw.style('w-3 h-3 mr-1', { hidden: type === VerifyTypeEnum.NOT_VERIFIED });
  const textColor = COLOR_BY_TYPE[type].textColor;
  const textStyle = tw.style({ color: textColor, fontSize: 10 });
  const iconName = type === VerifyTypeEnum.OFFICIAL_REJECTED ? 'info' : 'checkmark-rounded';

  return (
    <View style={[tw`rounded-full py-1 flex-row items-center`, containerStyles, props?.style]}>
      <View style={iconStyle}>
        <Icon name={iconName} color={iconColor} size={12} />
      </View>
      <Text style={textStyle}>{t(`collection.verifiedChip.${type}`)}</Text>
    </View>
  );
}