import * as apollo from '@apollo/client';
import { render } from '@testing-library/react';
import { ToastProvider } from '@theorchard/suite-frontend';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import React from 'react';
import { FingerprintRulesOAPanel } from '../fingerprint-rules-oa-panel';
import type { AccountFingerprintRules, FingerprintRule } from 'src/types';
import type { FingerprintRulesOAPanelProps } from '../fingerprint-rules-oa-panel';

dayjs.extend(utc);

describe('<FingerprintRulesOAPanel>', () => {
    const vendorRules = [
        {
            active: true,
            policy: 'Monetize',
            service: 'TikTok',
            territory: 'FR',
            startDate: dayjs
                .utc('2023-01-02T00:00:00.000Z')
                .format('D MMM YYYY'),
            endDate: '-',
            createdDate: dayjs
                .utc('2023-01-01T00:00:00.000Z')
                .format('D MMM YYYY'),
            lastModifiedDate: dayjs
                .utc('2023-01-01T00:00:00.000Z')
                .format('D MMM YYYY'),
            createdBy: {
                profileId: '123',
                profileType: 'ContentProfile',
                profileName: 'Name',
            },
            lastModifiedBy: {
                profileId: '123',
                profileType: 'ContentProfile',
                profileName: 'Name',
            },
        },
    ] as FingerprintRule[];
    const subaccountRules = [] as FingerprintRule[];
    const territories = [
        {
            territoryCodeA2: 'FR',
            territoryName: 'France',
            continent: 'Europe',
        },
        {
            territoryCodeA2: 'US',
            territoryName: 'United States of America',
            continent: 'North America',
        },
    ];
    const accountRules = {
        accountType: 'Vendor',
        accountId: 123,
        vendorRules,
        subaccountRules,
    } as AccountFingerprintRules;

    const defaultProps: FingerprintRulesOAPanelProps = {
        rules: accountRules,
        territories,
        loading: false,
        error: false,
        canManageRules: false,
    };

    beforeEach(() => {
        jest.spyOn(apollo, 'useMutation').mockReturnValue([
            jest.fn(),
            {} as apollo.MutationResult,
        ]);
    });

    afterEach(jest.restoreAllMocks);

    const renderWrapper = (props: Partial<FingerprintRulesOAPanelProps> = {}) =>
        render(
            <ToastProvider>
                <FingerprintRulesOAPanel {...defaultProps} {...props} />
            </ToastProvider>
        );

    describe('when we can edit/create rules', () => {
        test('renders default OA panel', () => {
            const { container } = renderWrapper({
                canManageRules: true,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders loading OA panel', () => {
            const { container } = renderWrapper({
                loading: true,
                rules: undefined,
                canManageRules: true,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders empty state OA panel', () => {
            const { container } = renderWrapper({
                rules: undefined,
                canManageRules: true,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders empty state vendor OA panel', () => {
            const vendorRules = [] as FingerprintRule[];
            const subaccountRules = [] as FingerprintRule[];
            const accountRules = {
                accountType: 'Vendor',
                accountId: 123,
                vendorRules,
                subaccountRules,
            } as AccountFingerprintRules;
            const { container } = renderWrapper({
                rules: accountRules,
                canManageRules: true,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders empty state subaccount OA panel', () => {
            const vendorRules = [] as FingerprintRule[];
            const subaccountRules = [] as FingerprintRule[];
            const accountRules = {
                accountType: 'Subaccount',
                accountId: 456,
                vendorRules,
                subaccountRules,
            } as AccountFingerprintRules;
            const { container } = renderWrapper({
                rules: accountRules,
                canManageRules: true,
            });

            expect(container).toMatchSnapshot();
        });

        test('renders subaccount OA panel if no subaccount rules but with vendor rules', () => {
            const vendorRules = [
                {
                    active: true,
                    policy: 'Monetize',
                    service: 'TikTok',
                    territory: 'FR',
                    startDate: dayjs
                        .utc('2023-01-02T00:00:00.000Z')
                        .format('D MMM YYYY'),
                    endDate: '-',
                    createdDate: dayjs
                        .utc('2023-01-01T00:00:00.000Z')
                        .format('D MMM YYYY'),
                    lastModifiedDate: dayjs
                        .utc('2023-01-01T00:00:00.000Z')
                        .format('D MMM YYYY'),
                    createdBy: {
                        profileId: '123',
                        profileType: 'ContentProfile',
                        profileName: 'Name',
                    },
                    lastModifiedBy: {
                        profileId: '123',
                        profileType: 'ContentProfile',
                        profileName: 'Name',
                    },
                },
            ] as FingerprintRule[];
            const subaccountRules = [] as FingerprintRule[];
            const accountRules = {
                accountType: 'Subaccount',
                accountId: 456,
                vendorRules,
                subaccountRules,
            } as AccountFingerprintRules;
            const { container } = renderWrapper({
                rules: accountRules,
                canManageRules: true,
            });

            expect(container).toMatchSnapshot();
        });
    });

    describe('when we cannot edit/create rules', () => {
        test('renders default OA panel', () => {
            const { container } = renderWrapper({
                canManageRules: false,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders loading OA panel', () => {
            const { container } = renderWrapper({
                loading: true,
                rules: undefined,
                canManageRules: false,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders empty state OA panel', () => {
            const { container } = renderWrapper({
                rules: undefined,
                canManageRules: false,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders empty state vendor OA panel', () => {
            const vendorRules = [] as FingerprintRule[];
            const subaccountRules = [] as FingerprintRule[];
            const accountRules = {
                accountType: 'Vendor',
                accountId: 123,
                vendorRules,
                subaccountRules,
            } as AccountFingerprintRules;
            const { container } = renderWrapper({
                rules: accountRules,
                canManageRules: false,
            });
            expect(container).toMatchSnapshot();
        });

        test('renders empty state subaccount OA panel', () => {
            const vendorRules = [] as FingerprintRule[];
            const subaccountRules = [] as FingerprintRule[];
            const accountRules = {
                accountType: 'Subaccount',
                accountId: 456,
                vendorRules,
                subaccountRules,
            } as AccountFingerprintRules;
            const { container } = renderWrapper({
                rules: accountRules,
                canManageRules: false,
            });

            expect(container).toMatchSnapshot();
        });

        test('renders subaccount OA panel if no subaccount rules but with vendor rules', () => {
            const vendorRules = [
                {
                    active: true,
                    policy: 'Monetize',
                    service: 'TikTok',
                    territory: 'FR',
                    startDate: dayjs
                        .utc('2023-01-02T00:00:00.000Z')
                        .format('D MMM YYYY'),
                    endDate: '-',
                    createdDate: dayjs
                        .utc('2023-01-01T00:00:00.000Z')
                        .format('D MMM YYYY'),
                    lastModifiedDate: dayjs
                        .utc('2023-01-01T00:00:00.000Z')
                        .format('D MMM YYYY'),
                    createdBy: {
                        profileId: '123',
                        profileType: 'ContentProfile',
                        profileName: 'Name',
                    },
                    lastModifiedBy: {
                        profileId: '123',
                        profileType: 'ContentProfile',
                        profileName: 'Name',
                    },
                },
            ] as FingerprintRule[];
            const subaccountRules = [] as FingerprintRule[];
            const accountRules = {
                accountType: 'Subaccount',
                accountId: 456,
                vendorRules,
                subaccountRules,
            } as AccountFingerprintRules;
            const { container } = renderWrapper({
                rules: accountRules,
                canManageRules: false,
            });

            expect(container).toMatchSnapshot();
        });
    });
});