import * as React from 'react'
import getFormValues from '@theoryofnekomata/formxtra/dist/index';
import getNumberName from '../../core/src';
import enGB from '../../core/src/locales/variants/en-GB';
import enPH from '../../core/src/locales/variants/en-PH';
import deDE from '../../core/src/locales/variants/de-DE';

const App = () => {
  const [numberName, setNumberName] = React.useState('')

  const computeNumberName = (form: HTMLFormElement) => {
    const { number: x, locale: localeStr } = getFormValues(form) as { number: string, locale: string }
    const { [localeStr]: locale = enPH } = {
      'en-PH': enPH,
      'en-GB': enGB,
      'de-DE': deDE,
    } as Record<string, (...args: unknown[]) => string>
    let numberName: string
    try {
      numberName = getNumberName(
        x
          .replaceAll(' ', '')
          .replaceAll('_', '')
          .replaceAll(',', ''),
        {
          locale,
        }
      )
    } catch {
      numberName = ''
    }
    setNumberName(numberName)
  }

  const handleSubmit: React.FormEventHandler = e => {
    computeNumberName(e.target as HTMLFormElement)
  }

  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement | HTMLSelectElement> = e => {
    computeNumberName(e.target.form as HTMLFormElement)
  }

  return (
    <form
      onSubmit={handleSubmit}
    >
      <select
        name="locale"
        className="locale"
        aria-label="Locale"
        onChange={handleChange}
      >
        <optgroup
          label="English (English)"
        >
          <option
            value="en-PH"
          >
            Philippines
          </option>
          <option
            value="en-GB"
          >
            United Kingdom
          </option>
        </optgroup>
        <optgroup
          label="Deutsch (German)"
        >
          <option
            value="de-DE"
          >
            Germany
          </option>
        </optgroup>
      </select>
      <textarea
        name="number"
        onChange={handleChange}
        placeholder="Enter a number, e.g. 1000, 1e+45"
        className="input"
        aria-label="Input"
      />
      <textarea
        placeholder="Its name goes here"
        readOnly
        value={numberName}
        className="output"
        aria-label="Output"
      />
    </form>
  )
}

export default App