import React from 'react'
import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { AmountInput } from '../index'

describe('<AmountInput/> backspace', () => {
  const onValueChangeSpy = jest.fn()

  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('should handle backspace with suffix', () => {
    render(
      <AmountInput
        onValueChange={onValueChangeSpy}
        intlConfig={{ locale: 'de-DE', currency: 'EUR' }}
        decimalsLimit={5}
        defaultValue="12,34"
      />
    )

    expect(screen.getByRole('textbox')).toHaveValue('12,34\xa0€')

    userEvent.type(screen.getByRole('textbox'), '56')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith('12,3456', undefined, {
      float: 12.3456,
      formatted: '12,3456 €',
      value: '12,3456'
    })
    expect(screen.getByRole('textbox')).toHaveValue('12,3456\xa0€')

    userEvent.type(screen.getByRole('textbox'), '{backspace}{backspace}{backspace}')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith('12,3', undefined, {
      float: 12.3,
      formatted: '12,3 €',
      value: '12,3'
    })
    expect(screen.getByRole('textbox')).toHaveValue('12,3\xa0€')
  })

  it('should handle backspace with default value and decimal scale', () => {
    render(
      <AmountInput
        defaultValue="1"
        onValueChange={onValueChangeSpy}
        decimalScale={2}
        prefix="£"
      />
    )

    expect(screen.getByRole('textbox')).toHaveValue('£1.00')

    userEvent.type(screen.getByRole('textbox'), '{backspace}')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith('1.0', undefined, {
      float: 1,
      formatted: '£1.0',
      value: '1.0'
    })
    expect(screen.getByRole('textbox')).toHaveValue('£1.0')

    userEvent.type(screen.getByRole('textbox'), '{backspace}')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith('1.', undefined, {
      float: 1,
      formatted: '£1.',
      value: '1.'
    })
    expect(screen.getByRole('textbox')).toHaveValue('£1.')

    userEvent.type(screen.getByRole('textbox'), '{backspace}')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith('1', undefined, {
      float: 1,
      formatted: '£1',
      value: '1'
    })
    expect(screen.getByRole('textbox')).toHaveValue('£1')

    userEvent.type(screen.getByRole('textbox'), '{backspace}')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith(undefined, undefined, {
      float: null,
      formatted: '',
      value: ''
    })
    expect(screen.getByRole('textbox')).toHaveValue('')
  })

  it('should handle Del key without moving cursor', () => {
    render(
      <AmountInput
        defaultValue=""
        onValueChange={onValueChangeSpy}
        groupSeparator={','}
        decimalScale={2}
        prefix="$"
      />
    )

    userEvent.type(screen.getByRole('textbox'), '123456789')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith('123456789', undefined, {
      float: 123456789,
      formatted: '$123,456,789',
      value: '123456789'
    })
    expect(screen.getByRole('textbox')).toHaveValue('$123,456,789')

    userEvent.type(screen.getByRole('textbox'), '{arrowleft}{arrowleft}{arrowleft}{del}')

    expect(onValueChangeSpy).toHaveBeenLastCalledWith('12345689', undefined, {
      float: 12345689,
      formatted: '$12,345,689',
      value: '12345689'
    })
    expect(screen.getByRole('textbox')).toHaveValue('$12,345,689')
  })

  it('should handle backspace character when no prefix', () => {
    render(<AmountInput prefix="" defaultValue="12345" groupSeparator="," />)
    const input = screen.getByRole('textbox')
    expect(input).toHaveValue('12,345')

    userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{backspace}')

    expect(input).toHaveValue('1,345')
  })

  it('should handle delete character left of group separator correctly', () => {
    render(<AmountInput prefix="£" defaultValue="1234" groupSeparator="," />)
    const input = screen.getByRole('textbox')
    expect(input).toHaveValue('£1,234')

    userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{del}')

    expect(input).toHaveValue('£134')
  })

  it('should handle backspace at the beginning of the input when prefix exists', () => {
    render(<AmountInput prefix="£" defaultValue="12345" groupSeparator="," />)
    const input = screen.getByRole('textbox')
    expect(input).toHaveValue('£12,345')

    userEvent.type(
      input,
      '{backspace}{arrowleft}{arrowleft}{arrowleft}{backspace}{backspace}{backspace}'
    )

    expect(input).toHaveValue('£234')
  })

  it('should handle backspace at the beginning of the input when no prefix exists', () => {
    render(<AmountInput prefix="" defaultValue="12345" groupSeparator="," />)
    const input = screen.getByRole('textbox')
    expect(input).toHaveValue('12,345')

    userEvent.type(
      input,
      '{backspace}{arrowleft}{arrowleft}{arrowleft}{backspace}{backspace}{backspace}'
    )

    expect(input).toHaveValue('234')
  })
})