import React from 'react';
import { expect, test } from '@playwright/experimental-ct-react';
import { withThemeProvider, convertHexToRgb } from '../../../helpers';
import Checkbox from './index.jsx';

test.use({ viewport: { width: 500, height: 500 } });

test.describe('Checkbox Component Tests', () => {
  test('Checkbox checked', async ({ mount }) => {
    let clicked = false;

    const component = await mount(
      withThemeProvider(
        <Checkbox
          checked={clicked}
          onChange={() => {
            clicked = true;
          }}
          label="Checkbox"
        />
      )
    );
    await expect(component).toContainText('Checkbox');
    await component.dispatchEvent('click');
    expect(clicked).toBeTruthy();
  });

  test('Checkbox unchecked', async ({ mount }) => {
    let clicked = true;

    const component = await mount(
      withThemeProvider(
        <Checkbox
          checked={clicked}
          onChange={() => {
            clicked = false;
          }}
          label="Checkbox"
        />
      )
    );
    await expect(component).toContainText('Checkbox');
    await component.dispatchEvent('click');
    expect(clicked).toBeFalsy();
  });

  test('Checkbox Small', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Checkbox onChange={undefined} label="Checkbox" size="small" />));
    await expect(component).toContainText('Checkbox');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('width', '16px');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('height', '16px');
  });

  test('Checkbox Medium', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Checkbox onChange={undefined} label="Checkbox" size="medium" />));
    await expect(component).toContainText('Checkbox');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('width', '20px');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('height', '20px');
  });

  test('Checkbox Rounded', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Checkbox onChange={undefined} label="Checkbox" rounded />));
    await expect(component).toContainText('Checkbox');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('border-radius', '50%');
  });

  test('Checkbox disabled', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Checkbox onChange={undefined} label="Checkbox" disabled />));
    await expect(component).toContainText('Checkbox');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('cursor', 'not-allowed');
  });

  test('Checkbox background color checked', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Checkbox onChange={undefined} label="Checkbox" checked />));
    await expect(component).toContainText('Checkbox');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('background-color', convertHexToRgb('#212121'));
  });

  test('Checkbox background color unchecked', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Checkbox onChange={undefined} label="Checkbox" />));
    await expect(component).toContainText('Checkbox');
    await expect(component.locator('div[role=indicator]')).toHaveCSS('background-color', convertHexToRgb('#ffffff'));
  });
});