import { describe, expect, test } from 'vitest'
import { MeasurementTools } from '../../index'
import { render } from '../../../tests/providers'
import { MAP_ID } from '../../../tests/config'
import userEvent from '@testing-library/user-event'

describe('MeasurementTools', () => {
  test('should change the enabled state', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'change enabled' })
    await userEvent.click(button)

    const enabledText = getByText('enabled: true')
    expect(enabledText).toBeTruthy()
  })

  test('should change the mode', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'change mode' })
    await userEvent.click(button)

    const modeText = getByText('mode: area')
    expect(modeText).toBeTruthy()
  })

  test('should change the unit', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'change unit' })
    await userEvent.click(button)

    const unitText = getByText('unit: kilometer')
    expect(unitText).toBeTruthy()
  })

  test('should change the locale', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'change locale' })
    await userEvent.click(button)

    const localeText = getByText('locale: es')
    expect(localeText).toBeTruthy()
  })

  test('should change the distance', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'change distance' })
    await userEvent.click(button)

    const distanceText = getByText('distance: 100')
    expect(distanceText).toBeTruthy()
  })

  test('should change the finished state', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'change finished' })
    await userEvent.click(button)

    const finishedText = getByText('finished: true')
    expect(finishedText).toBeTruthy()
  })

  test('should change the positions', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'change positions' })
    await userEvent.click(button)

    const positionsText = getByText('positions: 0,0,1,1,2,2')
    expect(positionsText).toBeTruthy()
  })

  test('should clear the layer', async () => {
    const { getByRole, getByText } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'clear layer' })
    await userEvent.click(button)

    const clearLayerOnStartText = getByText('clearLayerOnStart: false')
    expect(clearLayerOnStartText).toBeTruthy()
  })

  test('should toggle the layer', async () => {
    const { getByRole } = render(<MeasurementToolWrapper />)

    const button = getByRole('button', { name: 'toggle layer' })
    await userEvent.click(button)
  })
})

// Aux
function MeasurementToolWrapper() {
  return (
    <MeasurementTools mapId={MAP_ID}>
      <MeasurementTools.Controls mapId={MAP_ID}>
        {({
          enabled,
          modeSelected,
          unit,
          locale,
          distance,
          finished,
          positions,
          setEnabled,
          setModeSelected,
          setUnit,
          setLocale,
          setDistance,
          setFinished,
          setPositions,
          toggleLayer,
          clearLayer,
          clearLayerOnStart,
        }) => {
          return (
            <div>
              <button onClick={() => setEnabled(!enabled)}>
                change enabled
              </button>
              <p>enabled: {String(enabled)}</p>

              <button onClick={() => setModeSelected('area')}>
                change mode
              </button>
              <p>mode: {modeSelected}</p>

              <button onClick={() => setUnit('kilometer')}>change unit</button>
              <p>unit: {unit}</p>

              <button onClick={() => setLocale('es')}>change locale</button>
              <p>locale: {locale}</p>

              <button onClick={() => setDistance(100)}>change distance</button>
              <p>distance: {distance}</p>

              <button onClick={() => setFinished(!finished)}>
                change finished
              </button>
              <p>finished: {String(finished)}</p>

              <button
                onClick={() => {
                  setPositions([
                    [0, 0],
                    [1, 1],
                    [2, 2],
                  ])
                }}
              >
                change positions
              </button>
              <p>positions: {String(positions)}</p>

              <button onClick={() => clearLayer()}>clear layer</button>
              <p>clearLayerOnStart: {String(clearLayerOnStart)}</p>

              <button onClick={() => toggleLayer(false)}>toggle layer</button>
            </div>
          )
        }}
      </MeasurementTools.Controls>
    </MeasurementTools>
  )
}
