import { AssetLevelEnum } from '@bit-ui-libs/common';
import { useQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
import ContentLoader, { Rect } from 'react-content-loader/native';
import { useTranslation } from 'react-i18next';
import { Linking, ScrollView, View } from 'react-native';
import { Button, Text } from '../../../components';
import { PUBLIC_TOKEN_GRADING_URL, tw } from '../../../core';
import { BottomModal } from '../../../layouts';
import { useChainService, useServicesStore } from '../../../stores';
import { createModalStore } from '../../../utils';
import { BeingIdLevel, DeviceLevel } from '../../user';
import { TokenLevel } from './TokenLevel';

export const useTokenLevelsModal = createModalStore();

interface TokenLevelsModalProps {
  eventId: string;
  onClose?: () => void;
}

export function TokenLevelsModal(props: TokenLevelsModalProps) {
  const { eventId, onClose } = props;
  // const logger = useLogger({ namespace: 'TokenLevelsModal' });
  const { t } = useTranslation();
  const chainService = useChainService();
  const userService = useServicesStore((s) => s.endUser);

  const { visible, hide } = useTokenLevelsModal();
  const contentLoader = useMemo(
    () => (
      <ContentLoader style={tw`w-full h-12`} viewBox="0 0 500 30" backgroundColor="#808080" foregroundColor="#e5e7ebbf">
        <Rect x="0" y="0" rx="4" ry="4" width="500" height="30" />
      </ContentLoader>
    ),
    []
  );

  const { data, isLoading } = useQuery({
    queryKey: ['token-levels', eventId],
    queryFn: async () => {
      // logger.debug('Getting event data for token, eventId:', eventId);
      const event = await chainService.getEvent(eventId);
      const asset = await chainService.getDetailsByEvent(eventId);
      const owner = await userService.getBeingId(asset.ownerId);
      return {
        beingIdLevel: owner.level,
        hardwareLevel: event.device.hardwareLevel,
        assetLevel: asset.level,
      };
    },
    enabled: !!eventId,
  });

  const levels: Record<AssetLevelEnum, string> = t('collection.tokenLevel', { returnObjects: true });

  return (
    <BottomModal visible={visible} onClose={onClose ?? hide}>
      <ScrollView>
        <Text isHeader style={tw`text-[#58595B]`} containerStyle={tw`my-1`}>
          Bio-ID Level
        </Text>
        {isLoading ? contentLoader : <BeingIdLevel level={data?.beingIdLevel} />}
        <Text isHeader style={tw`text-[#58595B]`} containerStyle={tw`my-1`}>
          Hardware Level
        </Text>
        {isLoading ? contentLoader : <DeviceLevel level={data?.hardwareLevel} />}
        <Text isHeader style={tw`text-[#58595B]`} containerStyle={tw`my-1`}>
          Asset Levels
        </Text>
        {(Object.keys(levels) as AssetLevelEnum[]).map((level) => (
          <View
            key={level}
            style={tw.style('flex-row my-1 items-center', {
              'rounded-s border-primary border-2': level === data?.assetLevel,
            })}
          >
            <TokenLevel level={level} />
            <Text containerStyle={tw`flex-1 ml-2`} style={tw`text-black text-xs`}>
              {t(`collection.tokenLevel.${level}`)}
            </Text>
          </View>
        ))}
        <Button
          dense
          outlined
          titleStyle={tw`text-dark`}
          style={tw`p-2`}
          onPress={() => (PUBLIC_TOKEN_GRADING_URL ? Linking.openURL(PUBLIC_TOKEN_GRADING_URL) : null)}
        >
          More information about levels
        </Button>
      </ScrollView>
    </BottomModal>
  );
}