import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import { AbacusScheduleTargetType } from 'src/apollo/definitions/globalTypes';
import * as scheduleMutation from 'src/apollo/mutations/schedule';
import {
    AddScheduleFormPopup,
    AddScheduleFormPopupPropTypes,
} from '../add-schedule-form-popup';

describe('<AddScheduleFormPopup/>', () => {
    const defaultProps = {
        isAutoAddEnabled: true,
        isModalOpen: true,
        onCloseHandler: jest.fn(),
        targetId: 'contributorId',
        targetType: AbacusScheduleTargetType.CONTRIBUTOR,
    };

    const render = (props: AddScheduleFormPopupPropTypes) =>
        renderInAppContext(<AddScheduleFormPopup {...props} />);

    it('displays a popup modal', () => {
        render(defaultProps);
        expect(screen.getByText('New Schedule')).toBeDefined();
    });

    it('renders a schedule creation form', () => {
        render(defaultProps);
        expect(screen.getByTestId('input-schedule-name')).toBeDefined();
        expect(screen.getByTestId('checkbox-auto-add')).toBeDefined();
        expect(screen.getByTestId('checkbox-auto-add')).not.toHaveAttribute(
            'disabled'
        );
    });

    it('renders with a disabled auto-add checkbox when another schedule already has auto-add', () => {
        const props = { ...defaultProps, isAutoAddEnabled: false };
        render(props);
        expect(screen.getByTestId('checkbox-auto-add')).toHaveAttribute(
            'disabled'
        );
    });

    describe('Save Button', () => {
        const addScheduleMock = jest.fn().mockResolvedValue({});

        afterEach(jest.restoreAllMocks);

        beforeEach(() => {
            jest.spyOn(scheduleMutation, 'useCreateSchedule').mockReturnValue(
                addScheduleMock
            );
        });

        it('raises a validation error when no schedule name is provided', () => {
            render(defaultProps);

            const nameInput = screen.getByTestId('input-schedule-name');
            const saveBtn = screen.getByText('Create');

            fireEvent.change(nameInput, { target: { value: ' ' } });
            fireEvent.click(saveBtn);

            expect(
                screen.getByTestId('input-schedule-name').classList
            ).toContain('error');
            expect(screen.getByText('Name cannot be blank')).toBeDefined();
            expect(addScheduleMock).not.toHaveBeenCalled();
        });

        it('calls the mutation to create a schedule when the form is valid', () => {
            render(defaultProps);

            const nameInput = screen.getByTestId('input-schedule-name');
            const autoAddCheckbox = screen.getByTestId('checkbox-auto-add');
            const saveBtn = screen.getByText('Create');

            fireEvent.change(nameInput, { target: { value: 'test' } });
            fireEvent.click(autoAddCheckbox);
            fireEvent.click(saveBtn);

            expect(addScheduleMock).toHaveBeenCalled();
        });
    });
});