import { fireEvent, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { DatePicker } from '../../src/components/DatePicker';

describe('DatePicker', () => {
    it('supports datetime-local type and change callback', () => {
        const onChange = vi.fn();
        render(<DatePicker label="Schedule" type="datetime-local" value="" onChange={onChange} />);

        const input = screen.getByLabelText('Schedule') as HTMLInputElement;
        expect(input.type).toBe('datetime-local');

        fireEvent.change(input, { target: { value: '2031-05-20T14:30' } });
        expect(onChange).toHaveBeenCalledTimes(1);
    });

    it('supports date type and disabled state', () => {
        render(
            <DatePicker
                label="Publish date"
                type="date"
                value="2031-05-20"
                onChange={() => {}}
                disabled
            />,
        );

        const input = screen.getByLabelText('Publish date') as HTMLInputElement;
        expect(input.type).toBe('date');
        expect(input).toBeDisabled();
    });

    it('renders right icon and error message', () => {
        const { container } = render(
            <DatePicker
                label="Schedule"
                type="datetime-local"
                value=""
                onChange={() => {}}
                rightIcon={<span data-testid="right-icon">R</span>}
                error="Invalid date"
                inputClassName="custom-input"
            />,
        );

        const input = container.querySelector('input');
        expect(input).toBeInstanceOf(HTMLInputElement);
        expect(screen.getByTestId('right-icon')).toBeInTheDocument();
        expect(input).toHaveClass('pr-10');
        expect(input).toHaveClass('custom-input');
        expect(screen.getByText('Invalid date')).toBeInTheDocument();
    });

    it('supports inline layout', () => {
        const { container } = render(
            <DatePicker label="Start time" type="time" value="09:00" onChange={() => {}} layout="inline" />,
        );

        expect(container.querySelector('label')).toHaveClass('inline-flex');
        expect(container.querySelector('label > div')).not.toHaveClass('mt-1');
    });
});