import * as React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { fireEvent, render, screen } from '../../utils/test-utils';
import { Sidebar } from './Sidebar';

describe.concurrent('Sidebar', () => {
  it('Start default', () => {
    render(
      <Sidebar
        selectedContainer={undefined}
        componentOptions={[]}
        isOpen={true}
        buttonOnClick={() => { } } categories={[]}
      />
    );
    const stuff = screen.queryByText(/stuff/i);

    expect(screen.getByText(/Components/i).classList.contains('left-0')).toBeDefined();
    expect(stuff).toBeNull();
  });

  it('Start close', () => {
    render(<Sidebar
      componentOptions={[]}
      isOpen={false}
      buttonOnClick={() => { } } selectedContainer={undefined} categories={[]} />);

    const stuff = screen.queryByText(/stuff/i);
    expect(screen.getByText(/Components/i).classList.contains('-left-64')).toBeDefined();
    expect(stuff).toBeNull();
  });

  it('With stuff', () => {
    const type = 'stuff';
    const handleButtonClick = vi.fn();
    render(<Sidebar
      componentOptions={[
        {
          /* eslint-disable @typescript-eslint/naming-convention */
          Type: type,
          Width: 30,
          Height: 30,
          Style: {}
          /* eslint-enable */
        }
      ]}
      isOpen={true}
      buttonOnClick={handleButtonClick} selectedContainer={undefined} categories={[]} />);
    const stuff = screen.getByText(/stuff/i);

    expect(stuff).toBeDefined();
    fireEvent.click(stuff);
    expect(handleButtonClick).toHaveBeenCalledTimes(1);
  });
});