import { test, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import Select from './Select';

const SELECT_ID = 'select-component';
const LABEL_TEXT = 'choose a component';
const OPTIONS = <>
    <option value="accordion">Accordion</option>
    <option value="breadcrumbs">Breadcrumbs</option>
    <option value="button">Button</option>
</>;

test('select renders correctly', () => {
    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');
    const selectWrapper = select.parentElement;
    const label = selectWrapper?.previousElementSibling;
    const selectArrow = select.nextElementSibling;

    expect(select).toHaveClass('ds_select');
    expect(select.id).toEqual(SELECT_ID);
    expect(select).toHaveAttribute('name', SELECT_ID);

    expect(selectWrapper).toHaveClass('ds_select-wrapper');
    expect(selectWrapper?.tagName).toEqual('DIV');

    expect(label).toHaveClass('ds_label');
    expect(label).toHaveAttribute('for', SELECT_ID);

    expect(selectArrow).toHaveClass('ds_select-arrow');
    expect(selectArrow).toHaveAttribute('aria-hidden');
    expect(selectArrow?.textContent).toEqual('');
});

test('select with width', () => {
    const SELECTWIDTH = 'fixed-10';

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            width={SELECTWIDTH}
        >
            {OPTIONS}
        </Select>
    );

    const selectWrapper = screen.getByRole('combobox').parentElement;
    expect(selectWrapper).toHaveClass(`ds_input--${SELECTWIDTH}`);
});

test('select with hint text', () => {
    const HINT_TEXT = 'hint text';

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            hintText={HINT_TEXT}
        >
            {OPTIONS}
        </Select>
    );

    const hintTextEl = screen.getByText(HINT_TEXT);
    const select = screen.getByRole('combobox');

    expect(hintTextEl).toBeInTheDocument();
    expect(select).toHaveAttribute('aria-describedby', hintTextEl.id);
});

test('select with custom name', () => {
    const SELECT_NAME = 'foo';

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            name={SELECT_NAME}
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');
    expect(select).toHaveAttribute('name', SELECT_NAME);
});

test('select with blur function', () => {
    const ONBLUR_FUNCTION = vi.fn();

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            onBlur={ONBLUR_FUNCTION}
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');

    fireEvent.blur(select);

    expect(ONBLUR_FUNCTION).toHaveBeenCalled();
});

test('select with change function', () => {
    const ONCHANGE_FUNCTION = vi.fn();

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            onChange={ONCHANGE_FUNCTION}
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');

    fireEvent.change(select, {target: {value: 'button'}});

    expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
});

test('select with onBlur that is not a function', () => {
    render(
        <Select
        id={SELECT_ID}
        label={LABEL_TEXT}
            // @ts-expect-error onBlur is not a function
            onBlur='foo'
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');

    fireEvent.blur(select);

    // todo: assertion
    // success indicated by no errors thrown
    // error would be thrown on an untestable thread
});

test('select with onChange that is not a function', () => {
    render(
        <Select
        id={SELECT_ID}
        label={LABEL_TEXT}
            // @ts-expect-error onChange is not a function
            onChange='foo'
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');

    fireEvent.change(select, {target: {value: 'button'}});

    // todo: assertion
    // success indicated by no errors thrown
    // error would be thrown on an untestable thread
});

test('select with placeholder option', () => {
    const PLACEHOLDER_TEXT = 'foo';

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            placeholder={PLACEHOLDER_TEXT}
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');
    const firstOption = select.childNodes[0];
    expect(firstOption.textContent).toEqual(PLACEHOLDER_TEXT);
    expect(firstOption).toHaveAttribute('value', '');
});

test('select with initial value', () => {
    const INITIAL_VALUE = 'button';

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            defaultValue={INITIAL_VALUE}
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');
    const selectedOption = [].slice.call(select.childNodes).filter(childNode => childNode.selected)[0];
    expect(selectedOption).toHaveAttribute('value', INITIAL_VALUE);
});

test('select with error message', () => {
    const ERROR_MESSAGE_TEXT = 'This is a required field';

    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            errorMessage={ERROR_MESSAGE_TEXT}
            hasError
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');
    const selectWrapper = select.parentElement;
    const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);

    expect(selectWrapper).toHaveClass('ds_input--error')
    expect(select).toHaveAttribute('aria-describedby', errorMessageElement.id);
    expect(select).toHaveAttribute('aria-invalid', 'true');
    expect(errorMessageElement).toBeInTheDocument();
    expect(errorMessageElement).toHaveClass('ds_question__error-message');
});

test('passing additional props', () => {
    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            data-test="foo"
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');
    const selectWrapper = select.parentElement;
    expect(selectWrapper?.dataset.test).toEqual('foo');
});

test('passing additional CSS classes', () => {
    render(
        <Select
            id={SELECT_ID}
            label={LABEL_TEXT}
            className="foo"
        >
            {OPTIONS}
        </Select>
    );

    const select = screen.getByRole('combobox');
    const selectWrapper = select.parentElement;
    expect(selectWrapper).toHaveClass('foo', 'ds_select-wrapper');
});