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

import { isMobileDevice } from 'config/userAgent'
import { devices } from 'config'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import {
  Switch,
  Icon,
  Title as TitleBase,
} from 'features/MatchSwitches/styled'
import { getSwitchScoreIconName } from 'helpers/getSwitchScoreIconName'

type TWrapper = {
  isHidden?: boolean,
}

const Wrapper = styled.div<TWrapper>`
  margin-top: 4.3rem;
  display: ${({ isHidden }) => (isHidden ? 'none' : 'block')};
  ${isMobileDevice
    ? css`
      margin-top: 0;
      margin-bottom: 20px;


      > * {
      &:first-child {
        justify-content: flex-start;
      }
    }
    `
    : ''}
  
  @media ${devices.tablet} {
   margin-top: 2rem;
  }
`

const Title = styled(TitleBase)`
  margin-right: 1.3rem;
  font-weight: normal;
  font-size: 1.2rem;
  text-transform: none;
  align-self: flex-start;
  
  @media ${devices.tablet} {
    font-size: 2.6rem;
  }
`

type Props = {
  className?: string,
}

export const ScoreSwitch = ({ className }: Props) => {
  const { isScoreHidden, toggleScore } = useMatchSwitchesStore()

  return (
    <Wrapper
      className={className}
      // isHidden={isMobileDevice}
    >
      <Switch
        role='switch'
        onClick={toggleScore}
        aria-checked={isScoreHidden}
      >
        <Title t='hide_score' />
        <Icon
          width={1.8}
          height={1.4}
          iconName={getSwitchScoreIconName()}
          isOn={!isScoreHidden}
        />
      </Switch>
    </Wrapper>
  )
}
