import { MintStatus } from '@bit-ui-libs/common';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
import { Text } from '../../../components';
import { tw } from '../../../core/tailwind';
import { useTheme } from '../../../core/theme';

interface MintedChipProps {
  hidden?: boolean;
  // For BITDEV-1389, status may not be "MINTED" (due to a backend bug),
  // but the token could still be minted. Thus, we need to rely on this flag
  isMinted?: boolean;
  status?: MintStatus;
  constrainWidth?: boolean;
}

export function MintedChip(props: MintedChipProps) {
  const { hidden, status, isMinted, constrainWidth } = props;
  const { t } = useTranslation();
  const { primary } = useTheme();
  // const isMinted = status === 'MINTED';

  const message = useMemo(() => {
    // "status" is unstable as of 05/27/23 ...
    // Meaning, sometimes "MINTING_STARTED" doesn't get updated to "MINTED" (BITDEV-1389).
    // Therefore, we should check "isMinted" first
    if (isMinted) return t('collection.assetCard.minted');
    switch (status) {
      case 'MINTING_STARTED':
        return 'Minting...';
      case 'MINTING_FAILED':
        return 'Mint Failed';
      case 'MINTED':
        return 'Minted';
      // return t('collection.assetCard.minted');
      default:
        // For BITDEV-1389, status may not be "MINTED" (due to a backend bug),
        // but the token could still be minted.
        return t('collection.assetCard.minted');
    }
  }, [status]);

  const containerStyles = tw.style(`rounded-full px-2 pr-1 py-1 flex-row items-center mx-1`, {
    backgroundColor: isMinted ? 'rgba(128, 195, 66, 0.1)' : 'transparent',
    maxWidth: constrainWidth ? '45%' : undefined,
    hidden,
  });
  const iconStyles = tw.style(`mr-1`, { hidden: !isMinted });
  const messageStyles = tw.style({
    color: isMinted ? primary : '#FA881F',
    'font-bold': !isMinted,
    fontSize: 10,
  });

  return (
    <View style={containerStyles}>
      <View style={iconStyles}>
        <FastImage source={require('../../../assets/vdt-minted.png')} />
      </View>
      <Text style={messageStyles}>{message}</Text>
    </View>
  );
}