// 'use no memo' — see src/components/reference/reference.tsx for rationale.
// Page.Nav + Page.Body tab pattern depends on parent re-render on URL change.
'use no memo';

import React from 'react';
import { Page, useFeatureFlag } from '@theorchard/suite-frontend';
import { PageHeader } from '../shared/pageHeader';
import { LinkButton } from 'src/components/shared/link-button';
import { usePayoneerOutageStatus } from 'src/components/shared/payoneer-service-outage-alert';
import { USER_FEATURES } from 'src/constants';
import { createNewPayments } from 'src/urls/frontend-royalties';
import AdvancePayments from './advance-payments';
import PaymentsListTable from './payments-list-table';
import CustomPayments from './custom-payments';
import { GlyphIcon } from '@theorchard/suite-icons';
import PaymentSearch from './payment-search';
import './styles.scss';

const TAB_BALANCE = 'keyBalancePayments';
const TAB_ADVANCE = 'keyAdvancePayments';
const TAB_CUSTOM = 'keyCustomPayments';
const TAB_SEARCH = 'keyPaymentSearch';

export const PaymentsList: React.FC = () => {
    const isFeatureAbacusCreateAndApprovePaymentsEnabled = useFeatureFlag(
        USER_FEATURES.ABACUS_CREATE_AND_APPROVE_PAYMENTS
    );
    const isFeaturePaymentSearchEnabled = useFeatureFlag(
        USER_FEATURES.TAP_PAYMENT_SEARCH
    );

    const { alert } = usePayoneerOutageStatus({});

    const tabs = [
        { key: TAB_BALANCE, label: 'Balance Payments' },
        { key: TAB_ADVANCE, label: 'Advance Payments' },
        {
            key: TAB_CUSTOM,
            label: 'Custom Payments',
        },
        ...(isFeaturePaymentSearchEnabled
            ? [
                  {
                      key: TAB_SEARCH,
                      label: (
                          <span className="d-flex flex-row align-items-center PaymentListTabs-SearchTab">
                              <GlyphIcon name="search" size={16} />
                              <span>Payment Search</span>
                          </span>
                      ),
                  },
              ]
            : []),
    ];

    const views = {
        [TAB_BALANCE]: PaymentsListTable,
        [TAB_ADVANCE]: AdvancePayments,
        [TAB_CUSTOM]: CustomPayments,
        ...(isFeaturePaymentSearchEnabled && {
            [TAB_SEARCH]: PaymentSearch,
        }),
    };

    return (
        <Page className="PaymentList" testId="PaymentList">
            <PageHeader title="Payments">
                {isFeatureAbacusCreateAndApprovePaymentsEnabled && (
                    <div className="AddNewButton ml-auto">
                        <LinkButton
                            target={createNewPayments}
                            label="New Payments"
                        />
                    </div>
                )}
            </PageHeader>
            {alert}
            <Page.Nav className="PaymentListTabs" items={tabs} />
            <Page.Body views={views} />
        </Page>
    );
};