import { FC } from 'react'
import { FactorySelect } from '../FactorySelect/FactorySelect'
import { useGroups } from '../../contexts/GroupProvider'
import { I18n } from '../../shared/I18n/I18n'
import { Section } from '../../shared/Section/Section'
import { Heading } from '../../shared/Heading'
import { Paragraph } from '../../shared/Paragraph/Paragraph'
import { Collapsible } from '../../shared/Collapsible/Collapsible'
import styles from './SectionPreferences.module.css'

export const SectionPreferences: FC = () => {
  const { baseFactories, setBaseFactories, ignoredFactories, setIgnoredFactories } = useGroups()
  return (
    <Section>
      <Collapsible id={'collapseBase'}>
        <Heading type={'section'}>
          <I18n id={'page.home.pref.basic.title'} />
        </Heading>
        <Paragraph size={'subtitle'}>
          <I18n id={'page.home.pref.basic.description'} />
        </Paragraph>
        <FactorySelect
          id={'baseFactoriesSelect'}
          factories={baseFactories}
          onSetFactories={setBaseFactories}
          fixInputs={true}
        />
      </Collapsible>

      <Collapsible id={'collapseIgnored'} className={styles.marginTop}>
        <Heading type={'section'}>
          <I18n id={'page.home.pref.ignored.title'} />
        </Heading>
        <Paragraph size={'subtitle'}>
          <I18n id={'page.home.pref.ignored.description'} />
        </Paragraph>
        <FactorySelect
          id={'ignoredFactoriesSelect'}
          factories={ignoredFactories}
          onSetFactories={setIgnoredFactories}
        />
      </Collapsible>
    </Section>
  )
}