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

describe('<DatePicker>', () => {
    const onChange = vi.fn();
    const defaultProps: DatePickerProps = {
        onChange,
    };

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

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

    testComponent(DatePicker, undefined, 'SuiteDateSinglePicker');

    test('uses default range if none given', async () => {
        const { findByText, getByTestId } = renderMocked();

        const datePicker = getByTestId('SuiteDateSinglePicker');

        fireEvent.click(datePicker.querySelector('input')!);

        const startDate = new Date();
        const startMonth = startDate.toLocaleString('en', {
            month: 'long',
            year: 'numeric',
            timeZone: 'UTC',
        });

        const endDate = new Date(startDate);
        endDate.setMonth(endDate.getMonth() + 2);
        const endMonth = endDate.toLocaleString('en', {
            month: 'long',
            year: 'numeric',
            timeZone: 'UTC',
        });

        expect(await findByText(startMonth)).toBeVisible();
        expect(await findByText(endMonth)).toBeVisible();
    });

    test('applies custom ranges', async () => {
        const { getByText, getByTestId, findByText } = renderMocked({
            customDateRange: {
                start: '2020-01-01',
                end: '2020-02-01',
            },
        });

        const datePicker = getByTestId('SuiteDateSinglePicker');
        const datePickerTrigger = getByText(t('select_date'));

        fireEvent.click(datePickerTrigger);

        expect(await findByText('January 2020')).toBeVisible();

        expect(getByText('February 2020')).toBeVisible();

        const months = datePicker.querySelectorAll('.DateSelect-calendar');
        expect(months).toHaveLength(2);
    });

    describe('Component customization integration', () => {
        test('custom components work in DatePicker wrapper', () => {
            const customContent = 'Custom Content';
            const CustomDateCell = vi.fn(({ date }) => (
                <div data-testid={`cell-${date.getDate()}`}>{customContent}</div>
            ));

            const { getByTestId, getAllByText } = renderMocked({
                customDateRange: {
                    start: '2022-01-01',
                    end: '2022-01-31',
                },
                components: {
                    DateCell: CustomDateCell,
                },
            });

            // Open the picker
            fireEvent.click(getByTestId('SuiteDateSinglePicker').querySelector('input')!);

            // Verify custom DateCell is used
            expect(CustomDateCell).toHaveBeenCalled();
            expect(getAllByText(customContent)).toHaveLength(31);
        });
    });
});