import React from 'react';
import { fireEvent, screen, within } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import mockDate from 'mockdate';
import { TOOLTIP_START_DATE } from 'src/apollo/type-constants/contract';
import {
    CurrentPeriodStartDatePropTypes,
    CurrentPeriodStartDate,
} from 'src/components/contract-lifecycle-shared/current-period-start-date';

describe('<CurrentPeriodStartDate/>', () => {
    const defaultProps: CurrentPeriodStartDatePropTypes = {
        errors: {},
        handleFormChange: jest.fn(),
        lifecycleTermStart: '',
        isReadOnly: false,
    };

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

    describe('not read only', () => {
        it('renders with placeholder text', () => {
            renderComponent();

            const startDateLabel = screen.getByText(
                'Current Period Start Date'
            );
            const startDatePicker = screen.getByTestId('start-date-picker');

            expect(startDateLabel).toBeInTheDocument();
            expect(startDatePicker).toBeInTheDocument();
            expect(startDatePicker.textContent).toEqual('YYYY-MM-DD');
        });

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

            const startDatePicker = screen.getByTestId('start-date-picker');
            fireEvent.mouseOver(startDatePicker);

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

        it('displays the lifecycleTermStartDate if present', () => {
            const lifecycleTermStartProps = {
                ...defaultProps,
                lifecycleTermStart: '2020-01-01',
            };

            renderComponent(lifecycleTermStartProps);

            const startDatePicker = screen.getByTestId('start-date-picker');
            expect(startDatePicker).toBeInTheDocument();
            expect(startDatePicker.textContent).toEqual('Jan 1, 2020');
        });

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

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

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

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

            mockDate.reset();
        });

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

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

            const startDatePicker = screen.getByTestId('start-date-picker');
            const error = screen.getByText(errors.lifecycleTermStart);

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

    describe('read only', () => {
        const lifecycleTermStart = '2020-01-01';
        const readOnlyProps = {
            ...defaultProps,
            lifecycleTermStart,
            isReadOnly: true,
        };

        it('renders with lifecycle term start date as text', () => {
            renderComponent(readOnlyProps);

            const startDateLabel = screen.getByText(
                'Current Period Start Date'
            );
            const startDateText = screen.getByText(lifecycleTermStart);

            expect(startDateLabel).toBeInTheDocument();
            expect(startDateText).toBeInTheDocument();
        });

        it('does not render a date picker', () => {
            renderComponent(readOnlyProps);

            const startDatePicker = screen.queryByTestId('start-date-picker');
            expect(startDatePicker).not.toBeInTheDocument();
        });

        it('does not display a tooltip message on hover', () => {
            renderComponent(readOnlyProps);

            const startDateText = screen.getByText(lifecycleTermStart);
            fireEvent.mouseOver(startDateText);

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