import { type FC } from 'react';
import { StyleSheet, View } from 'react-native';
import TTypography from '../TTypography/TTypography';
import { TypographyVariant } from '../TTypography/TTypographyEnum';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';

interface LabelProps {
  title: string;
  variant:
  | 'Successful'
  | 'Failed'
  | 'Active'
  | 'Resolved'
  | 'Cancelled'
  | 'Initiated';
  backgroundColor?: string;
  theme: Theme;
  testID?: string;
  accessibilityLabel?: string;
}

const TTag: FC<LabelProps> = ({
  title,
  variant,
  backgroundColor,
  testID,
  accessibilityLabel,
}): any => {
  const { colors } = useTheme();

  function getLabelBackgroundColor(
    status:
      | 'Successful'
      | 'Failed'
      | 'Active'
      | 'Resolved'
      | 'Cancelled'
      | 'Initiated'
  ) {
    switch (status) {
      case 'Successful':
        return colors.transactionSuccess;
      case 'Failed':
        return colors.transactionFailure;
      case 'Active':
      case 'Initiated':
        return colors.primaryYellowShade;
      case 'Resolved':
        return colors.successTwo;
      case 'Cancelled':
        return colors.neutralGray;
      default:
        return colors.white;
    }
  }

  return (
    <View style={tagStyles.container}>
      <TTypography
        fontSize={12}
        color={colors.textColor}
        variant={TypographyVariant.PRIMARY}
        testID={testID}
        accessibilityLabel={accessibilityLabel}
        style={[
          tagStyles.label,
          {
            backgroundColor: variant
              ? getLabelBackgroundColor(variant)
              : backgroundColor,
          },
        ]}
      >
        {title}
      </TTypography>
    </View>
  );
};

export default withTheme(TTag);

const tagStyles = StyleSheet.create({
  container: {
    alignItems: 'flex-start',
  },
  label: {
    lineHeight: 14,
    paddingVertical: 4,
    paddingHorizontal: 6,
    borderRadius: 4,
    overflow: 'hidden',
  },
});