import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

import { T9n } from 'features/T9n'

import { usePreferencesStore } from '../../store'
import { Search } from '../Search'
import { TournamentsList } from '../TournamentsList'

import { BlockTitle, Checkbox } from '../../styled'

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 14px;
  flex-grow: 1;
  ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        padding-left: 0;
      }
    `
    : ''};
`

const CheckboxWrapper = styled.div`
  margin: 20px 0 22px 2px;
  margin-top: 20px;
  margin-bottom: 22px;
  ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        margin: 15px 0 10px;
      }
    `
    : ''};
`

export const TournamentsBlock = () => {
  const {
    allTournamentsSelected,
    isTournamentSelected,
    onSelectAllTournaments,
    onTournamentSelect,
    tournaments,
  } = usePreferencesStore()
  return (
    <Wrapper>
      <BlockTitle>
        <T9n t='tournament' />
      </BlockTitle>
      <CheckboxWrapper>
        <Checkbox
          labelLexic='all'
          checked={allTournamentsSelected}
          onChange={onSelectAllTournaments}
        />
      </CheckboxWrapper>
      <Search />
      <TournamentsList
        isTournamentSelected={isTournamentSelected}
        onTournamentSelect={onTournamentSelect}
        tournaments={tournaments}
      />
    </Wrapper>
  )
}
