import React from 'react';
import { fireEvent, screen, within } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import mockDate from 'mockdate';
import { AbacusContractLifecycleScheduleRenewalType } from 'src/apollo/definitions/globalTypes';
import { TOOLTIP_END_DATE } from 'src/apollo/type-constants/contract';
import {
    CurrentPeriodEndDatePropTypes,
    CurrentPeriodEndDate,
} from 'src/components/contract-lifecycle-shared/current-period-end-date';

describe('<CurrentPeriodEndDate/>', () => {
    const defaultProps: CurrentPeriodEndDatePropTypes = {
        contractLifecycleSchedule: {
            renewalType: `${AbacusContractLifecycleScheduleRenewalType.RENEW_AFTER_CERTAIN_DATE}`,
        },
        errors: {},
        handleFormChange: jest.fn(),
        isDisabled: false,
        isEditForm: false,
        lifecycleTermStart: null,
    };

    const renderComponent = (
        props: CurrentPeriodEndDatePropTypes = defaultProps
    ) => renderInAppContext(<CurrentPeriodEndDate {...props} />);

    it('displays the scheduleEnd date if present', () => {
        const endDateProps = {
            renewalType: `${AbacusContractLifecycleScheduleRenewalType.RENEW_AFTER_CERTAIN_DATE}`,
            scheduleEnd: '2034-01-01',
        };

        renderComponent({
            ...defaultProps,
            contractLifecycleSchedule: endDateProps,
        });

        const endDatePicker = screen.getByTestId('end-date-picker');
        expect(endDatePicker).toBeInTheDocument();
        expect(endDatePicker.textContent).toEqual('Jan 1, 2034');
    });

    it('handles a scheduleEnd date being picked', async () => {
        mockDate.set('2024-06-01');
        renderComponent({ ...defaultProps });

        const endDatePicker = screen.getByTestId('end-date-picker');
        fireEvent.click(within(endDatePicker).getByRole('button'));

        const dateInput = await within(endDatePicker).findByRole('textbox');
        fireEvent.change(dateInput, { target: { value: '2024-06-20' } });

        expect(defaultProps.handleFormChange).toHaveBeenCalledWith(
            'scheduleEnd',
            '2024-06-20'
        );

        mockDate.reset();
    });

    it('displays an error if present', () => {
        const errors = { scheduleEnd: 'i am an error' };

        renderComponent({ ...defaultProps, errors });

        const endDatePicker = screen.getByTestId('end-date-picker');
        const error = screen.getByText(errors.scheduleEnd);

        expect(endDatePicker.className).toContain('error');
        expect(error).toBeInTheDocument();
    });

    it('renders disabled when specified', () => {
        renderComponent({ ...defaultProps, isDisabled: true });

        const endDatePicker = screen.getByTestId('SuiteSelectInput');
        expect(endDatePicker.className).toContain('disabled');
    });

    it('handles an end date 9999-12-31', async () => {
        renderComponent({ ...defaultProps });

        const endDatePicker = screen.getByTestId('end-date-picker');
        fireEvent.click(within(endDatePicker).getByRole('button'));

        const dateInput = await within(endDatePicker).findByRole('textbox');
        fireEvent.change(dateInput, { target: { value: '9999-12-31' } });

        expect(defaultProps.handleFormChange).toHaveBeenCalledWith(
            'scheduleEnd',
            '9999-12-31'
        );

        expect(screen.getByText('Dec 31, 9999')).toBeDefined();
    });

    describe('create form', () => {
        it('renders with placeholder text', () => {
            renderComponent();

            const endDateLabel = screen.getByText('Current Period End Date');
            const endDatePicker = screen.getByTestId('end-date-picker');

            expect(endDateLabel).toBeInTheDocument();
            expect(endDatePicker).toBeInTheDocument();
            expect(endDatePicker.textContent).toEqual('YYYY-MM-DD');
        });

        it('displays a tooltip message on hover', async () => {
            renderComponent();

            const endDatePicker = screen.getByTestId('end-date-picker');
            fireEvent.mouseOver(endDatePicker);

            const tooltip = await screen.findByText(TOOLTIP_END_DATE);
            expect(tooltip).toBeInTheDocument();
        });
    });

    describe('edit form', () => {
        it('does not display a tooltip message on hover', () => {
            renderComponent({ ...defaultProps, isEditForm: true });

            const endDatePicker = screen.getByTestId('end-date-picker');
            fireEvent.mouseOver(endDatePicker);

            const tooltip = screen.queryByText(TOOLTIP_END_DATE);
            expect(tooltip).not.toBeInTheDocument();
        });
    });
});