import { AssetLevelEnum, MintStatus, SellingMethodEnum } from '@bit-ui-libs/common';
import ContentLoader, { Rect } from 'react-content-loader/native';
import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
import FastImage from 'react-native-fast-image';
import { Swipeable } from 'react-native-gesture-handler';
import { Icon, Text } from '../../../components';
import { tw } from '../../../core/tailwind';
import { useTheme, useThemeMode } from '../../../core/theme';
import { TokenSwipeActionEnum } from '../enums';
import { useGetTokenDetails } from '../hooks';
import { MintedChip } from './MintedChip';
import { TokenCardSwipeActions } from './TokenCardSwipeActions';
import { TokenDateText } from './TokenDateText';
import { TokenLevel } from './TokenLevel';
import { VerifiedChip } from './VerifiedChip';

// type EventOrAssetIdProp =
//   // If parent component passes EVENT ID, then no need ASSET ID
//   | { eventId: string; assetId?: never }
//   // If parent component passes ASSET ID, then no need EVENT ID
//   | { assetId: string; eventId?: never };

type TokenCardProps =
  // EventOrAssetIdProp &
  {
    eventId: string;
    // Style-related props
    flat?: boolean;
    hideTitle?: boolean;
    hideDate?: boolean;
    hideStatus?: boolean;
    flexRowReverse?: boolean;
    showAssetLevel?: boolean;
    swipeActions?: TokenSwipeActionEnum[];
    // This is needed to workaround BITDEV-1389 (caused by backend logical bug on steps)
    isMinted?: boolean;
    sellingMethod?: SellingMethodEnum;
    // Event handlers
    onPress?: () => void;
    onSwipeAction?: (action: TokenSwipeActionEnum) => void;
    onGradePress?: (level: AssetLevelEnum, hardwareLevel?: number) => void;
  };

export function TokenCard(props: TokenCardProps) {
  const { data, isLoading } = useGetTokenDetails({
    eventId: props.eventId,
    queryKey: ['token-details', props.eventId],
    separator: ' | ',
  });

  const containerStyle = [
    tw.style(`my-2 rounded-lg items-center`, {
      'flex-row': !props.flexRowReverse,
      'flex-row-reverse': props.flexRowReverse,
      // The styles below will be hidden if FLAT is passed.
      // FLAT means this card is intended to be placed flat against a parent container,
      // instead of using our own custom container.
      'bg-[#2A2627] dark:bg-[#808080]': !props.flat,
      'p-2': !props.flat,
      borderWidth: !props.flat ? 1 : undefined,
      borderColor: !props.flat ? '#565656' : undefined,
    }),
  ];

  if (isLoading) return <TokenCardContentLoader style={containerStyle} />;

  const component = (
    <TouchableOpacity onPress={props.onPress} disabled={!props.onPress}>
      <View style={containerStyle}>
        {data?.mainAttachmentUrl ? (
          <FastImage
            style={tw.style('rounded-lg w-1/4 h-full mr-3', { aspectRatio: 1 })}
            source={{ uri: data?.mainAttachmentUrl }}
            resizeMode={FastImage.resizeMode.cover}
            defaultSource={require('../../../assets/chainit-1024.jpg')}
          />
        ) : (
          <FastImage
            style={tw.style('rounded-lg w-1/4 h-full mr-3', { aspectRatio: 1 })}
            resizeMode={FastImage.resizeMode.cover}
            source={require('../../../assets/chainit-1024.jpg')}
          />
        )}
        <View style={tw`grow`}>
          <View style={tw`flex-row justify-between`}>
            {/* Token Information */}
            <View style={tw`flex-1`}>
              <View style={tw.style({ hidden: props.hideTitle ?? false })}>
                <Text numberOfLines={1} style={tw.style('text-base font-montserratBold')}>
                  {data?.name}
                </Text>
              </View>
              <Text style={tw.style('text-gray-200 opacity-75', { fontSize: 10 })}>{data?.categories}</Text>
            </View>

            {props.showAssetLevel && data?.device ? (
              <TokenLevel
                level={data.level}
                onPress={() => {
                  props.onGradePress?.(data.level, data.device.hardwareLevel);
                }}
              />
            ) : null}
          </View>
          {/* Token Date */}
          <View style={tw.style('my-1', { hidden: props.hideDate ?? false })}>
            <TokenDateText date={data?.eventDate} />
          </View>
          {/* Token Statuses */}
          <View style={tw.style('mt-1 flex-row flex-wrap grow', { hidden: props.hideStatus ?? false })}>
            <VerifiedChip type={data?.verifyType} />
            <MintedChip hidden={!data?.isMinted} isMinted={data?.isMinted} status={data?.status as MintStatus} />
            <View style={tw`flex-grow items-end justify-center px-2`}>
              {props.sellingMethod === SellingMethodEnum.Fixed && (
                <Icon name={'shopping-cart'} size={18} color="#80C342" />
              )}
              {props.sellingMethod === SellingMethodEnum.Auction && <Icon name={'auction'} size={18} color="#F6851B" />}
            </View>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );

  if (props.swipeActions && props.swipeActions.length > 0) {
    return (
      <Swipeable
        rightThreshold={75}
        overshootRight={false}
        renderRightActions={() => (
          <TokenCardSwipeActions
            sellingMethod={props?.sellingMethod}
            actions={props.swipeActions}
            onAction={props.onSwipeAction}
          />
        )}>
        {component}
      </Swipeable>
    );
  }

  return component;
}

interface TokenCardContentLoaderProps {
  style: StyleProp<ViewStyle>;
}

function TokenCardContentLoader({ style }: TokenCardContentLoaderProps) {
  const { background } = useTheme();
  const { currentTheme } = useThemeMode();

  return (
    <View style={style}>
      <ContentLoader
        style={tw`w-full h-23`}
        viewBox="0 0 200 50"
        backgroundColor={currentTheme === 'dark' ? '#171415' : '#808080'}
        foregroundColor={currentTheme === 'dark' ? background : '#e5e7ebbf'}>
        <Rect x="0" y="0" rx="4" ry="4" width="50" height="50" />
        <Rect x="58" y="5" rx="2" ry="2" width="50" height="8" />
        <Rect x="58" y="15" rx="2" ry="2" width="100" height="8" />
        <Rect x="58" y="25" rx="2" ry="2" width="25" height="8" />
        <Rect x="58" y="35" rx="2" ry="2" width="75" height="8" />
        <Rect x="180" y="0" rx="3" ry="3" width="20" height="20" />
      </ContentLoader>
    </View>
  );
}