import { act, fireEvent, render } from '@testing-library/react';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import React from 'react';
import DeliveryRightsModal from '../delivery-rights-modal';
import type { FingerprintRule } from 'src/types';
import type { DeliveryRightsModalProps } from '../delivery-rights-modal';

dayjs.extend(utc);

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

    const defaultProps: DeliveryRightsModalProps = {
        title: 'Title',
        isOpen: true,
        onRequestClose: () => {
            return undefined;
        },
        rules,
        carveoutRules: carveouts,
        territories: territories,
        accountType: 'Vendor',
    };

    const renderWrapper = (props: Partial<DeliveryRightsModalProps> = {}) =>
        render(<DeliveryRightsModal {...defaultProps} {...props} />);

    test('renders default service filter and data for current rules', () => {
        const { getByTestId } = renderWrapper();
        const modal = getByTestId('delivery-rights-modal');

        expect(modal).toMatchSnapshot();
    });

    test('renders splitted view when selecting a service', async () => {
        const { findByText } = renderWrapper();
        const serviceElement = await findByText('TikTok');

        act(() => {
            fireEvent.click(serviceElement);
        });

        expect(
            await findByText(
                $t('fingerprintRules.deliveryRightsModal.countries.allowed')
            )
        ).toBeInTheDocument();
        expect(
            await findByText(
                $t('fingerprintRules.deliveryRightsModal.countries.notAllowed')
            )
        ).toBeInTheDocument();
    });

    test('renders splitted view when selecting a country', async () => {
        const { getByTestId, findByText } = renderWrapper();

        const filterCountryButton = getByTestId('btn-country');
        act(() => {
            fireEvent.click(filterCountryButton);
        });

        const countryElement = await findByText('France');

        act(() => {
            fireEvent.click(countryElement);
        });

        expect(
            await findByText(
                $t('fingerprintRules.deliveryRightsModal.services.allowed')
            )
        ).toBeInTheDocument();
    });

    test('renders country filter when selected and data for current rules', async () => {
        const { getByTestId } = renderWrapper();
        const filterCountryButton = getByTestId('btn-country');
        act(() => {
            fireEvent.click(filterCountryButton);
        });

        const modal = getByTestId('delivery-rights-modal');

        expect(modal).toMatchSnapshot();
    });

    test('renders empty state for both filter on collecting sections', async () => {
        const { getByTestId, findByText } = renderWrapper({
            rules: [],
            carveoutRules: [
                {
                    active: true,
                    policy: 'Carveout',
                    service: 'TikTok',
                    territory: '*',
                    startDate: '-',
                    endDate: '-',
                    createdDate: dayjs
                        .utc('2023-01-01T00:00:00.000Z')
                        .format('D MMM YYYY HH:mm:ss'),
                    lastModifiedDate: dayjs
                        .utc('2023-01-01T00:00:00.000Z')
                        .format('D MMM YYYY HH:mm:ss'),
                    createdBy: {
                        profileId: '123',
                        profileType: 'ContentProfile',
                        profileName: 'Name',
                    },
                    lastModifiedBy: {
                        profileId: '123',
                        profileType: 'ContentProfile',
                        profileName: 'Name',
                    },
                },
            ],
        });

        expect(
            await findByText(
                $t(
                    'fingerprintRules.deliveryRightsModal.emptyState.notAllowed.service',
                    {
                        accountType: 'Account',
                    }
                )
            )
        ).toBeInTheDocument();

        const filterCountryButton = getByTestId('btn-country');
        act(() => {
            fireEvent.click(filterCountryButton);
        });

        expect(
            await findByText(
                $t(
                    'fingerprintRules.deliveryRightsModal.emptyState.notAllowed.country',
                    {
                        accountType: 'Account',
                    }
                )
            )
        ).toBeInTheDocument();
    });
});