import { ChainUtils, RelationTypeEnum } from '@bit-ui-libs/common';
import { useQuery } from '@tanstack/react-query';
import moment from 'moment';
import { useCallback } from 'react';
import { Image, StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
import { Icon, Loading, Text } from '../../../components';
import { tw } from '../../../core';
import { useChainService, useServicesStore } from '../../../stores';
import { useDeleteRefVdt } from '../hooks';

interface TokenImagesProps {
  eventId: string;
  isHeader?: boolean;
  showRemoveButton?: boolean;
  containerStyle?: StyleProp<ViewStyle>;
  headerStyle?: StyleProp<TextStyle>;
  onPreview?: (eventId: string, index: number) => void;
}

interface VdtItem {
  tokenImage?: string;
  name: string;
  eventDate: string;
  eventId: string;
  qrCodeRefId: string;
  id: string;
}

export function TokenImages(props: TokenImagesProps) {
  const { eventId, showRemoveButton, containerStyle, isHeader, onPreview, headerStyle } = props;
  const chainService = useChainService();
  const service = useServicesStore((s) => s);

  const {
    data: tokens,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ['token-images-data', eventId],
    queryFn: async () => {
      const asset = await chainService.getDetailsByEvent(eventId);
      const vdtsData: VdtItem[] = [];
      const referenceVDT = asset.referenceVDT.filter((i) => i.relationType === RelationTypeEnum.ChildVdt);
      if (referenceVDT.length > 0) {
        for (const item of referenceVDT) {
          const qrChainService = service.chainToken[item.vdtType];
          const asset = await qrChainService.assetByQr(item.qrCodeRefId);
          const tokenImage = asset.attachments?.[0]?.thumbUrl;
          const id = item.assetId ?? item.serviceId ?? '';
          vdtsData.push({
            tokenImage,
            name: asset.data ? ChainUtils.getName(asset.data) : '-',
            eventDate: moment(asset.eventDate).format('MM-DD-YYYY'),
            eventId: asset.id,
            qrCodeRefId: item.qrCodeRefId,
            id,
          });
        }
      }
      return Promise.all(vdtsData);
    },
  });

  const { deleteRefVdt } = useDeleteRefVdt({ onSuccess: refetch });

  const renderItem = useCallback(
    (item: VdtItem, i: number) => (
      <View key={i} style={tw`bg-black p-3 rounded-xl	flex-row items-center mt-2`}>
        <Image source={{ uri: item.tokenImage }} style={tw`h-15 w-15 rounded`} />
        <View style={tw`flex-1 mx-3`}>
          <Text style={tw`text-base font-bold`} numberOfLines={1}>
            {item.name}
          </Text>
          <Text style={tw.style('text-sm mb-1 text-[#999797]')}>{item.eventDate}</Text>
        </View>
        <View style={tw.style(`flex-wrap justify-around h-15 items-center`)}>
          <TouchableOpacity onPress={() => onPreview?.(item.eventId, i)}>
            <Icon name="view" size={17} color="#0CC4FE" />
          </TouchableOpacity>
          {showRemoveButton ? (
            <TouchableOpacity onPress={() => deleteRefVdt({ id: item.id, qrCodeRefId: item.qrCodeRefId })}>
              <Icon name="trash" size={15} color="#CC4848" />
            </TouchableOpacity>
          ) : null}
        </View>
      </View>
    ),
    []
  );
  const isHeaderShow = tokens && isHeader;

  return (
    <View>
      {!isLoading ? (
        tokens ? (
          <View style={containerStyle}>
            {isHeaderShow ? <Text style={[tw`text-base font-bold`, headerStyle]}>Attachments</Text> : null}
            {tokens?.map(renderItem)}
            {tokens.length === 0 ? <Text style={tw`text-base`}>No reference VDTs attach</Text> : null}
          </View>
        ) : undefined
      ) : (
        <Loading loading={isLoading} style={containerStyle} dark>
          Loading Reference VDTs...
        </Loading>
      )}
    </View>
  );
}