import React from 'react';

import '@testing-library/jest-dom';
import { render } from '@testing-library/react';

import { convertClassNameToSelector } from 'utils/common';

import { THEME } from '../../constants';
import { SingleToggle, singleToggleClassName } from './SingleToggle';
import { SINGLE_TOGGLE_TYPE } from './types';

describe('SingleToggle', () => {
  const value = 'value';
  const text = 'Single toggle';

  test('generates light theme if none was provided', () => {
    const { container } = render(
      <SingleToggle
        toggleType={SINGLE_TOGGLE_TYPE.textOnly}
        text={text}
        value={value}
      />,
    );
    const lightSingleToggleClassName = singleToggleClassName(null, { [THEME.light]: true });
    const toggleSelector = convertClassNameToSelector(lightSingleToggleClassName);
    const lightSingleToggle = container.querySelector(toggleSelector);
    expect(lightSingleToggle).not.toBeNull();
  });

  test('generates provided theme', () => {
    const { container } = render(
      <SingleToggle
        toggleType={SINGLE_TOGGLE_TYPE.textOnly}
        value={value}
        theme={THEME.dark}
        text={text}
      />,
    );
    const themeClassName = singleToggleClassName(null, { [THEME.dark]: true });
    const toggleSelector = convertClassNameToSelector(themeClassName);
    const themeSingleToggle = container.querySelector(toggleSelector);
    expect(themeSingleToggle).not.toBeNull();
  });

  test('adds custom className', () => {
    const customClassName = 'custom-class';
    const { container } = render(
      <SingleToggle
        toggleType={SINGLE_TOGGLE_TYPE.textOnly}
        value={value}
        className={customClassName}
        text={text}
      />,
    );
    const toggle = container.querySelector(convertClassNameToSelector(singleToggleClassName(null)));
    expect(toggle).toHaveClass(customClassName);
  });

  test('disables single toggle', () => {
    const { container } = render(
      <SingleToggle
        toggleType={SINGLE_TOGGLE_TYPE.textOnly}
        value={value}
        text={text}
        disabled
      />,
    );
    const toggle = container.querySelector(convertClassNameToSelector(singleToggleClassName(null)));
    expect(toggle).toBeDisabled();
  });

  test('has ability to pass data attributes', () => {
    const dataAttribute = 'data-selector';
    const dataSelector = 'single-toggle';
    const { container } = render(
      <SingleToggle
        toggleType={SINGLE_TOGGLE_TYPE.textOnly}
        value={value}
        dataAttributes={{ [dataAttribute]: dataSelector }}
        text={text}
      />,
    );
    const toggle = container.querySelector(convertClassNameToSelector(singleToggleClassName(null)));
    expect(toggle?.getAttribute(dataAttribute)).toEqual(dataSelector);
  });
});