import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import * as accountingPeriodMutations from 'src/apollo/mutations/accounting-period';
import {
    AccountingPeriodFormModal,
    type AccountingPeriodFormModalPropsTypes,
} from 'src/components/accounting-period-list/accounting-period-form-modal';
import { CONTRACT_TYPES, CONTRACT_TYPE_MAP } from 'src/constants';

describe('<AccountingPeriodFormModal>', () => {
    const render = (props: AccountingPeriodFormModalPropsTypes) =>
        renderInAppContext(<AccountingPeriodFormModal {...props} />);

    const defaultProps: AccountingPeriodFormModalPropsTypes = {
        onCloseHandler: jest.fn(),
        isAccountingPeriodFormModalOpen: true,
        currentStatementPeriod: {
            statementPeriodId: '261',
            statementPeriodName: 'August 2020',
        },
        setPage: jest.fn(),
    };
    const addAccountingPeriod = jest.fn().mockResolvedValue({});

    afterEach(jest.restoreAllMocks);

    beforeEach(() => {
        jest.spyOn(
            accountingPeriodMutations,
            'useCreateAccountingPeriod'
        ).mockReturnValue(addAccountingPeriod);
    });

    it('renders accounting period form', () => {
        render(defaultProps);
        expect(screen.getByText('Contract Type')).toBeDefined();
        expect(screen.getByText('Statement Period')).toBeDefined();
        expect(screen.getByText('Period Name')).toBeDefined();
        expect(screen.getByText('cancel')).toBeDefined();
        expect(screen.getByText('Create')).toBeDefined();
    });

    it('fires the closeFormHandler when the cancel button is clicked', () => {
        render(defaultProps);
        const cancelButton = screen.getByText('cancel');
        fireEvent.click(cancelButton);
        expect(defaultProps.onCloseHandler).toHaveBeenCalled();
    });

    it('fires the saveAccountingPeriod when the create button is clicked', () => {
        render(defaultProps);
        const accountingPeriodName = 'Test Accounting Period';
        const createButton = screen.getByText('Create');

        fireEvent.change(screen.getByTestId('accounting-period-name'), {
            target: { value: accountingPeriodName },
        });
        fireEvent.change(screen.getByRole('combobox'), {
            target: { value: CONTRACT_TYPES.DISTRIBUTION },
        });
        fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
        fireEvent.click(createButton);

        expect(addAccountingPeriod).toHaveBeenCalledWith({
            variables: {
                accountingPeriodName,
                contractType: CONTRACT_TYPES.DISTRIBUTION,
                statementPeriodId: '261',
            },
        });
    });

    it('does not display Legacy Distribution in the contract type dropdown', () => {
        render(defaultProps);
        fireEvent.change(screen.getByRole('combobox'), {
            target: { value: CONTRACT_TYPES.DISTRIBUTION },
        });
        expect(screen.getByText(CONTRACT_TYPE_MAP.distribution)).toBeDefined();
        expect(
            screen.queryByText(CONTRACT_TYPE_MAP.legacy_distribution)
        ).toBeNull();
    });
});