import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { DateRangePicker } from '../dateRangePicker';
import { t } from '../i18n';
import { DateRangePickerProps } from '../types';

describe('<DateRangePicker>', () => {
    const onChange = vi.fn();
    const defaultProps: DateRangePickerProps = {
        onChange,
        options: [
            {
                label: '7 Days',
                value: '7days',
                start: '2022-01-01',
                end: '2022-01-07',
            },
        ],
        customDateRange: {
            start: '2021-01-02',
            end: '2021-08-31',
        },
    };

    afterEach(() => vi.resetAllMocks());

    const renderMocked = (props?: Partial<DateRangePickerProps>) =>
        render(<DateRangePicker {...defaultProps} {...props} />);

    testComponent(DateRangePicker, undefined, 'SuiteDateRangePicker');

    test('renders default component', async () => {
        const { getByText, findByText } = renderMocked();

        const dropdown = getByText(t('select_period'));
        expect(dropdown).toBeVisible();
        fireEvent.click(dropdown);
        expect(await findByText('7 Days')).toBeVisible();
    });

    test('isClearable works when component is controlled', () => {
        const { getByTestId } = renderMocked({
            isClearable: true,
            selectedValue: { start: '2021-02-01', end: '2021-02-02' },
        });
        const clear = getByTestId('SuiteListViewClearButton');
        if (clear) fireEvent.click(clear);
        expect(onChange).toHaveBeenCalledWith(undefined);
    });

    test('singleDateRange is passed through to calendar', async () => {
        const { getByText } = renderMocked({
            customDateRange: {
                start: '2021-02-01',
                end: '2021-02-20',
            },
            selectedValue: {
                start: '2021-02-15',
                end: '2021-02-16',
            },
            singleDateRange: true,
        });

        const dropdown = getByText('2 Days');
        expect(dropdown).toBeVisible();

        fireEvent.click(dropdown);
        fireEvent.mouseDown(getByText('15'));
        fireEvent.click(getByText('Apply'));

        expect(onChange).toHaveBeenCalledWith({
            start: '2021-02-15',
            end: '2021-02-15',
            value: 'CUSTOM',
        });
    });

    test('portalElement is passed to Select component', async () => {
        const portalContainer = document.createElement('div');
        document.body.appendChild(portalContainer);

        const { findByTestId, getByText } = renderMocked({
            portalElement: portalContainer,
        });

        const dropdown = getByText(t('select_period'));
        fireEvent.click(dropdown);

        const listView = await findByTestId('SuiteListView');
        expect(listView).toBeInTheDocument();
        expect(portalContainer.contains(listView)).toBe(true);

        document.body.removeChild(portalContainer);
    });
});