import { getErrorMessage } from '@bit-ui-libs/common';
import { useQuery } from '@tanstack/react-query';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal, View } from 'react-native';
import { Button, Text } from '../../../components';
import { tw } from '../../../core/tailwind';
import { useServicesStore } from '../../../stores';

export enum OrgErrorTypeEnum {
  ORG_VDT_NOT_FOUND = 'ORG_VDT_NOT_FOUND',
}

function getOrgErrorDetails(err?: unknown): { orgId?: string; errorType: OrgErrorTypeEnum } | null {
  const message = getErrorMessage(err);
  if (/organization vdt with orgid:.*?not found/i.test(message)) {
    const match = message.match(/organization vdt with orgid:(.*?)not found/i);
    return { orgId: match![1]?.trim(), errorType: OrgErrorTypeEnum.ORG_VDT_NOT_FOUND };
  }
  return null;
}

interface OrgErrorModalProps {
  error?: unknown;
}

export function OrgErrorModal(props: OrgErrorModalProps) {
  const { error } = props;
  const { t } = useTranslation();
  const service = useServicesStore((s) => s.organization);

  const errorDetails = useMemo(() => getOrgErrorDetails(error), [error]);

  const { data } = useQuery({
    queryKey: ['get-organization-details-from-error', errorDetails],
    queryFn: async () => ({
      errorType: errorDetails!.errorType,
      org: await service.getOrganization(errorDetails!.orgId!),
    }),
    enabled: !!errorDetails?.orgId,
  });

  useEffect(() => {
    setVisible(!!data);
  }, [data]);

  const [visible, setVisible] = useState(false);

  const typeToMessage = useCallback((type?: OrgErrorTypeEnum) => {
    const typeToMessageMap = {
      [OrgErrorTypeEnum.ORG_VDT_NOT_FOUND]: t('chainToken.tokenDetails.errors.orgVdtNotFound'),
    };
    if (!type || !Object.keys(typeToMessageMap).includes(type)) return t('chainToken.tokenDetails.errors.unknown');
    return typeToMessageMap[type];
  }, []);

  const onDismiss = useCallback(() => setVisible(false), []);

  const title = data?.org.name ? data.org.name : 'Organization';
  const message = useMemo(() => typeToMessage(data?.errorType), [typeToMessage, data]);

  return (
    <Modal visible={visible} onDismiss={onDismiss}>
      <View style={tw`mb-2 bg-white justify-center`}>
        <Text isHeader style={tw`text-dark`}>
          Organization: {title}
        </Text>
        <View style={tw`py-4`}>
          <Text style={tw`text-black text-sm`}>{message}</Text>
        </View>
        <View style={tw`flex-row justify-end`}>
          <Button onPress={onDismiss}>OK</Button>
        </View>
      </View>
    </Modal>
  );
}