import React from 'react';
import { render } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { openSelect, getListOptions, getInputDisplayValue } from 'lib/test-utils/select';
import { TimezoneSelector, TimezoneSelectorProps } from '../timezoneSelector';
import { getTimezoneOptions } from '../utils';

describe('<TimezoneSelector>', () => {
    const renderComponent = (props: Partial<TimezoneSelectorProps> = {}) =>
        render(<TimezoneSelector {...props} />);

    testComponent(TimezoneSelector);

    test('render a custom list of timezones', async () => {
        const options = getTimezoneOptions().slice(0, 3);
        const { getByTestId } = renderComponent({
            options: options,
        });

        await openSelect('TimezoneSelector');

        const list = getByTestId('SuiteSelectDropdownMenu');

        expect(getListOptions(list)).toHaveLength(3);
    });

    test('there is an initialValue set and showing the full label', async () => {
        renderComponent({
            initialValue: 'europe/madrid',
        });

        const input = getInputDisplayValue();

        expect(input).toMatch(/^\(UTC[+-]\d{2}:\d{2}\) .+ - Madrid$/);
    });

    test('renders quickSelections before the options', async () => {
        const tzOptions = getTimezoneOptions();
        const options = tzOptions.slice(0, 10);
        const quickSelections = options.slice(0, 2);

        const { getByTestId, getByText } = renderComponent({
            quickSelections: quickSelections,
            options,
        });

        await openSelect('TimezoneSelector');

        expect(getByText('Quick selections')).toBeInTheDocument();

        const list = getByTestId('SuiteSelectDropdownMenu');

        expect(getListOptions(list)).toHaveLength(12);
    });

    test('generates timezone options for a specific date', () => {
        // Test with a summer date (July)
        const summerDate = new Date('2024-07-15');
        renderComponent({
            date: summerDate,
            initialValue: 'america/new_york',
        });

        const input = getInputDisplayValue();

        // New York should show UTC-4 in summer (DST)
        expect(input).toContain('UTC-04:00');
    });
});