import {
  HeaderActions,
  CloseButton,
} from 'features/PopupComponents'
import { T9n } from 'features/T9n'

import { SportsList } from './components/SportList'
import { TournamentsBlock } from './components/TournamentsBlock'
import { usePreferencesStore } from './store'

import {
  Modal,
  Wrapper,
  Header,
  HeaderTitle,
  Body,
  Footer,
  ApplyButton,
  Loader,
} from './styled'

export * from './store'

export const PreferencesPopup = () => {
  const {
    closePopup,
    isApplyButtonDisabled,
    isFetching,
    isOpen,
    onApplyClick,
  } = usePreferencesStore()

  return (
    <Modal
      isOpen={isOpen}
      close={closePopup}
      withCloseButton={false}
    >
      {isFetching && <Loader />}
      <Wrapper isFetching={isFetching}>
        <Header>
          <HeaderTitle>
            <T9n t='my_preferences' />
          </HeaderTitle>
          <HeaderActions position='right'>
            <CloseButton onClick={closePopup} />
          </HeaderActions>
        </Header>
        <Body>
          <SportsList />
          <TournamentsBlock />
        </Body>
        <Footer>
          <ApplyButton onClick={onApplyClick} disabled={isApplyButtonDisabled}>
            <T9n t='apply' />
          </ApplyButton>
        </Footer>
      </Wrapper>
    </Modal>
  )
}
