import React from 'react';
import { Label } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { useAccountPayeeRegistrationFormatQuery } from 'src/apollo/queries/account-payee-registration-format';
import { MaskedValue } from 'src/components/shared/masked-value';
import type { GetAccountPayeeBankDetailsQuery } from 'src/apollo/queries/__generated__/account-payee-bank-details';
import { EMPTY_CHAR } from '@theorchard/accounting-apps-shared';

export const UNMASKED_FIELDS = ['AccountName', 'country', 'currency'];

export interface AccountPayoutMethodProps {
    accountDetails?: GetAccountPayeeBankDetailsQuery['abacusAccount'];
}

export const AccountPayoutMethod: React.FC<AccountPayoutMethodProps> = ({
    accountDetails,
}) => {
    const accountPayee = accountDetails?.accountPayee;
    const payoutMethod = accountPayee?.bankDetails?.payoutMethod;
    const { data: accountPayeeRegistrationFormatData, loading } =
        useAccountPayeeRegistrationFormatQuery({
            accountPayeeId: accountPayee?.accountPayeeId || '',
            bankCountry: payoutMethod?.country || '',
            bankCurrency: payoutMethod?.currency || '',
            bankAccountType: payoutMethod?.bankAccountType || '',
        });
    const fieldsFormats =
        accountPayeeRegistrationFormatData?.accountPayeeRegistrationFormat
            .fields.items;

    if (!payoutMethod || loading) {
        return null;
    }

    const baseBankFields = [
        {
            name: 'country',
            label: 'Bank Country',
            value: payoutMethod.country,
        },
        {
            name: 'currency',
            label: 'Bank Currency',
            value: payoutMethod.currency,
        },
    ];

    const getLabel = (fieldName: string): string =>
        fieldsFormats?.find(item => item.fieldName === fieldName)?.label ||
        baseBankFields.find(item => item.name === fieldName)?.label ||
        fieldName;

    const getValue = (fieldName: string, value: string): string => {
        const options = fieldsFormats?.find(
            item => item.fieldName === fieldName
        )?.options?.items;

        if (options?.length) {
            return (
                options.find(opt => opt.value === value)?.description || value
            );
        }

        return value;
    };

    const fields = [
        ...(payoutMethod?.bankFieldDetails?.filter(item =>
            UNMASKED_FIELDS.includes(item.name)
        ) || []),
        ...baseBankFields,
        ...(payoutMethod?.bankFieldDetails?.filter(
            item => !UNMASKED_FIELDS.includes(item.name)
        ) || []),
    ];

    return (
        <>
            {fields.map(item => {
                const value =
                    getValue(item.name, item.value || '') || EMPTY_CHAR;
                return (
                    <Page.Col sm={12} md={3} key={item.name}>
                        <Label text={getLabel(item.name)} />
                        {UNMASKED_FIELDS.includes(item.name) ? (
                            value
                        ) : (
                            <MaskedValue value={value} />
                        )}
                    </Page.Col>
                );
            })}
        </>
    );
};