import React, { useState } from 'react'
import { render } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import userEvent from '@testing-library/user-event'
import NumberField from './NumberField'

describe('value', () => {
  const TestApp = ({ value: initialValue, ...props }) => {
    const [value, setValue] = useState(initialValue)
    return <NumberField {...props } data-testid="test" value={value} onChange={setValue}/>
  }
  const setup = props => {
    const { getByTestId } = render(<TestApp {...props}/>)
    return getByTestId('test')
  }

  it('renders', () => {
    const numberField = setup({ value: 5 })
    expect(numberField).toHaveValue('5')
  })

  it('pads if asked to', () => {
    const numberField = setup({ value: 5, pad: 2 })
    expect(numberField).toHaveValue('05')
  })

  it('uses placeholder when empty', () => {
    const placeholder = 'pick something!'
    const numberField = setup({ placeholder })
    expect(numberField).toHaveAttribute('placeholder', placeholder)
  })

  describe('min', () => {
    it('is used if typed value is lower after blur', () => {
      const numberField = setup({ value: 2, min: 1 })
      userEvent.type(numberField, '{backspace}0')
      userEvent.tab()
      expect(numberField).toHaveValue('1')
    })

    it('prevents arrow down from going below', () => {
      const numberField = setup({ value: 1, min: 1 })
      userEvent.type(numberField, '{arrowdown}')
      expect(numberField).toHaveValue('1')
    })
  })

  describe('max', () => {
    it('is used if typed value is higher after blur', () => {
      const numberField = setup({ value: 0, max: 1 })
      userEvent.type(numberField, '2')
      userEvent.tab()
      expect(numberField).toHaveValue('1')
    })

    it('prevents arrow up from going above', () => {
      const numberField = setup({ value: 1, max: 1 })
      userEvent.type(numberField, '{arrowup}')
      expect(numberField).toHaveValue('1')
    })
  })

  describe('pad', () => {
    it("add appropriate pad", () => {
      const numberField = setup({ value: 0, pad: 2 })
      userEvent.type(numberField, '12{backspace}')
      expect(numberField).toHaveValue('01')
    })
  })
})

describe('moveFocusOnMax', () => {
  const TestApp = props => {
    const [value, setValue] = useState(0)

    return <>
      <NumberField {...props } data-testid="test-a" value={value} onChange={setValue}/>
      <input data-testid="test-b"/>
    </>
  }

  const setup = () => {
    const props = { max: 12, pad: 2, moveFocusOnMax: true }
    const { getByTestId } = render(<TestApp {...props} />)
    return [getByTestId('test-a'), getByTestId('test-b')]
  }

  it('moves focus when any further input would exceed max', () => {
    const [numberField, nextTabbable] = setup()

    userEvent.type(numberField, '2')
    jest.runAllTimers()
    expect(nextTabbable).toHaveFocus()
  })

  it('does not move focus when some further input is possible without exceeding max', () => {
    const [numberField, nextTabbable] = setup()

    userEvent.type(numberField, '1') // (10, 11, 12) are still possible
    jest.runAllTimers()
    expect(numberField).toHaveFocus()
  })
})

describe('ignoredKeys', () => {
  const TestApp = props => {
    const [value, setValue] = useState(1)

    return <NumberField {...props } data-testid="test" value={value} onChange={setValue}/>
  }

  const setup = () => {
    const props = { ignoredKeys: ['ArrowUp', 'ArrowDown'] }
    const { getByTestId } = render(<TestApp {...props} />)
    return getByTestId('test')
  }

  it('prevents specified keys from changing values', () => {
    const numberField = setup()

    userEvent.type(numberField, '{arrowup}')
    jest.runAllTimers()
    expect(numberField).toHaveValue('1')

    userEvent.type(numberField, '{arrowdown}')
    jest.runAllTimers()
    expect(numberField).toHaveValue('1')
  })

  it('allows other keys from change the value', () => {
    const numberField = setup()

    userEvent.type(numberField, '2')
    jest.runAllTimers()
    expect(numberField).toHaveValue('12')
  })
})