import { Fragment } from 'react'

import { OutsideClick } from 'features/OutsideClick'

import { APISettings } from './components/APISettings'
import { useSystemSettings } from './hooks'

import {
  FadeIn,
  Form,
  Content,
  Footer,
  Header,
  HeaderTitle,
  TriggerButton,
  ApplyButton,
  CloseButton,
} from './styled'

const SystemSettings = () => {
  const {
    close,
    isOpen,
    onSubmit,
    open,
    selectedApi,
  } = useSystemSettings()

  return (
    <Fragment>
      <TriggerButton aria-label='Settings' onClick={open} />
      {
        isOpen && (
          <FadeIn>
            <OutsideClick onClick={close}>
              <Form onSubmit={onSubmit}>
                <Header>
                  <HeaderTitle>Настройки</HeaderTitle>
                  <CloseButton
                    aria-label='Close'
                    type='button'
                    onClick={close}
                  >
                    X
                  </CloseButton>
                </Header>
                <Content>
                  <APISettings selectedApi={selectedApi} />
                </Content>
                <Footer>
                  <ApplyButton>Применить</ApplyButton>
                </Footer>
              </Form>
            </OutsideClick>
          </FadeIn>
        )
      }
    </Fragment>
  )
}

export default SystemSettings