import React from 'react';
import { fireEvent, render } from '../../test-utils';
import HorizontalTabs from '../HorizontalTabs';
import { Size } from '../../types';
import 'jest-styled-components';
import '@testing-library/jest-dom';

const tabs = [
  {
    value: 'Tab1',
    selected: false,
    to: 'tab1',
  },
  {
    value: 'Tab2',
    selected: true,
    to: 'tab2',
  },
  {
    value: 'Tab3',
    selected: false,
    to: 'tab3',
    disabled: true,
  },
];




describe('<HorizontalTabs />', () => {
  it('Renders tabs component', async () => {
    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(3);
  });

  it('Renders tabs component with side fill', async () => {
    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} sideFill={true} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
    expect(queryByTestId('horizontal-tabs-container')?.querySelector('.fill')).toBeTruthy();
  });

  it('Renders tabs component with no tabs provided', async () => {
    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={[]} onTabChange={(to) => {}}></HorizontalTabs>);
    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(0);
  });

  it('Check disabled tabs rendered correctly', async () => {
    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
    const disabledTab = tabs.find((t) => t.disabled);
    const notDisabledTab = tabs.find((t) => !t.disabled);
    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();

    const disabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${disabledTab?.value}"]`);
    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);

    //check disabled/non-disabled rendered
    expect(disabledTabElem).toBeTruthy();
    expect(notDisabledTabElem).toBeTruthy();

    //check tab index prop set correct
    expect(disabledTabElem).toHaveAttribute('tabindex', '-1');
    expect(notDisabledTabElem).not.toHaveClass('disabled');
  });

  it('Check tab change callback called on tab click', async () => {
    const tabChangeFn = jest.fn();
    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={tabChangeFn}></HorizontalTabs>);

    const notDisabledTab = tabs.find((t) => !t.disabled);
    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);

    //fire click tab click event
    fireEvent(
      notDisabledTabElem as HTMLButtonElement,
      new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
      }),
    );

    //check has been called
    expect(tabChangeFn).toHaveBeenCalledTimes(1);
  });

  it('Check tab width calculed correctly when fullWidth prop set', async () => {
    const { queryByTestId, queryByText } = render(<HorizontalTabs fullWidth={true} size={Size.Small} tabs={tabs} onTabChange={() => {}}></HorizontalTabs>);

    const tabElement = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_Tab1"]`) as HTMLButtonElement;

    expect(tabElement).toBeTruthy();
    expect(tabElement.style).toHaveProperty('width', `${100 / tabs.length}%`);
  });
});