import React from 'react'

import styled from 'styled-components/macro'

import { Tooltip, TooltipWrapper } from 'features/Tooltip'
import { useMatchSwitchesStore } from 'features/MatchSwitches'

import {
  Switch,
  Icon,
} from '../../styled'

const Wrapper = styled.div`
  position: relative;

  :hover ${TooltipWrapper} {
    display: block;
  }
`

export const AvailableMatchesSwitch = () => {
  const {
    availableMatchesOnly,
    toggleMatchAvailablity,
  } = useMatchSwitchesStore()

  const lexic = availableMatchesOnly
    ? 'available_matches_shown'
    : 'all_matches_shown'

  return (
    <Wrapper>
      <Tooltip lexic={lexic}>
        <Switch
          role='switch'
          aria-checked={availableMatchesOnly}
          onClick={toggleMatchAvailablity}
        >
          <Icon
            iconName='match-switch'
            width={56}
            height={48}
            isOn={availableMatchesOnly}
          />
        </Switch>
      </Tooltip>
    </Wrapper>
  )
}