import { FC, useState } from 'react'
import { FactorySelect } from '../FactorySelect/FactorySelect'
import { useGroups } from '../../contexts/GroupProvider'
import { i18n, I18n } from '../../shared/I18n/I18n'
import { useIntl } from 'react-intl'

export const Preferences: FC = () => {
  const intl = useIntl()
  const { addGroup, baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } =
    useGroups()
  const [newGroupValue, setNewGroupValue] = useState(
    i18n(intl, 'page.home.group.add.default_group_name')
  )
  return (
    <>
      <fieldset>
        <legend>
          <I18n id={'page.home.pref.basic.title'} />
        </legend>
        <span>
          <I18n id={'page.home.pref.basic.description'} />
        </span>
        <FactorySelect
          id={'baseFactoriesSelect'}
          factories={baseFactories}
          onSetFactories={setBaseFactories}
          fixInputs={true}
        />
      </fieldset>
      <fieldset>
        <legend>
          <I18n id={'page.home.pref.ignored.title'} />
        </legend>
        <span>
          <I18n id={'page.home.pref.ignored.description'} />
        </span>
        <FactorySelect
          id={'ignoredFactoriesSelect'}
          factories={ignoredFactories}
          onSetFactories={setIgnoredFactories}
        />
      </fieldset>
      <fieldset>
        <legend>
          <I18n id={'page.home.group.add.title'} />
        </legend>
        <input value={newGroupValue} onChange={e => setNewGroupValue(e.target.value)} />
        <button
          disabled={!newGroupValue}
          onClick={() => {
            addGroup(newGroupValue)
            setNewGroupValue('New group')
          }}
        >
          <I18n id={'page.home.group.add.button_text'} values={{ name: newGroupValue }} />
        </button>
      </fieldset>
    </>
  )
}