import * as React from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { CMultiSelect } from '../index'

const options = [
  {
    value: 0,
    label: 'Angular',
  },
  {
    value: 1,
    label: 'Bootstrap',
    selected: true,
  },
  {
    value: 2,
    label: 'React.js',
  },
  {
    value: 3,
    label: 'Vue.js',
    selected: true,
  },
  {
    label: 'backend',
    options: [
      {
        value: 4,
        label: 'Django',
      },
      {
        value: 5,
        label: 'Laravel',
      },
      {
        value: 6,
        label: 'Node.js',
        disabled: true,
        selected: true,
      },
    ],
  },
]

test('loads and displays CMultiSelect component', async () => {
  const { container } = render(<CMultiSelect options={[]} />)
  expect(container).toMatchSnapshot()
})

test('CMultiSelect customize', async () => {
  const { container } = render(
    <CMultiSelect
      options={options}
      className="bazinga"
      cleaner={true}
      multiple={true}
      optionsMaxHeight={150}
      optionsStyle="checkbox"
      placeholder="placeholder"
      search={true}
      searchNoResultsLabel="searchNoResultsLabel"
      selectAll={true}
      selectAllLabel="selectAllLabel"
      selectionType="tags"
      selectionTypeCounterText="selectionTypeCounterText"
      visible={true}
    />,
  )
  expect(container).toMatchSnapshot()
  const nativeSelect = container.querySelector('select')
  expect(nativeSelect).toBeInTheDocument()
  expect(nativeSelect).toHaveAttribute('multiple', '')
  expect(nativeSelect).not.toHaveStyle('display: none')
  expect(nativeSelect).toHaveAttribute('tabindex', '-1')
  expect(nativeSelect).toHaveClass('form-multi-select')
  expect(nativeSelect?.parentElement).toHaveClass('form-multi-select')
  if (nativeSelect === null) {
    expect(true).toBe(false)
  } else {
    expect(nativeSelect.firstChild).toHaveAttribute('value', '1')
    expect(nativeSelect.firstChild).toHaveTextContent('Bootstrap')
    expect(nativeSelect.lastChild).toHaveAttribute('value', '6')
    expect(nativeSelect.lastChild).toHaveTextContent('Node.js')
  }
  expect(container.lastChild).toHaveClass('form-multi-select')
  expect(container.lastChild).toHaveClass('show')
  expect(container.lastChild).toHaveClass('bazinga')

  expect(container.querySelector('.form-multi-select-tag')).toBeInTheDocument()
  expect(container.querySelector('.form-multi-select-tag')).toHaveTextContent('Bootstrap')
  expect(container.querySelector('.form-multi-select-dropdown')).toBeInTheDocument()
  expect(container.querySelector('.form-multi-select-all')).toHaveTextContent('selectAllLabel')
  expect(container.querySelector('.form-multi-select-options')).toBeInTheDocument()
  const firstOption = container.querySelector('.form-multi-select-option')
  expect(firstOption).toHaveClass('form-multi-select-option-with-checkbox')
})

test('CMultiSelect fire events', async () => {
  const event = jest.fn()
  expect(event).toHaveBeenCalledTimes(0)
  render(
    <CMultiSelect
      options={options}
      className="bazinga"
      cleaner={true}
      multiple={true}
      optionsMaxHeight={150}
      optionsStyle="checkbox"
      placeholder="placeholder"
      search={true}
      searchNoResultsLabel="searchNoResultsLabel"
      selectAll={true}
      selectAllLabel="selectAllLabel"
      selectionType="tags"
      selectionTypeCounterText="selectionTypeCounterText"
      visible={true}
      onChange={event}
    />,
  )
  expect(event).toHaveBeenCalledTimes(1)
  const option = document.querySelector('.form-multi-select-option')
  if (option !== null) {
    fireEvent.click(option)
  }
  expect(event).toHaveBeenCalledTimes(2)
  const removeButton = document.querySelector('.form-multi-select-tag-delete')
  if (removeButton !== null) {
    fireEvent.click(removeButton)
  }
  expect(event).toHaveBeenCalledTimes(3)
})