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

import { ProfileTypes } from 'config'
import { isMobileDevice } from 'config/userAgent'

import { T9n } from 'features/T9n'
import { customScrollbar } from 'features/Common'
import { ProfileLogo } from 'features/ProfileLogo'

import { TooltipBlockWrapper } from './TooltipBlock/styled'

export const UserSportFavWrapper = styled.aside`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  padding-bottom: 2.75rem;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;

  ${isMobileDevice
    ? css`
     display: none;
    `
    : ''};
`

export const ScrollWrapper = styled.div`
  width: 4.35rem;
  padding: 0.472rem 0.19rem 0 0.15rem;
  height: calc(100vh - 15.96rem);
  display: flex;
  flex-direction: column;
  align-items: center;

  ${customScrollbar}
`

export const UserSportFavXWrapper = styled.button`
  position: absolute;
  top: -0.472rem;
  right: -0.472rem;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
`

export const UserSportFavItemLogoWrapper = styled.div`
  position: relative;
  width: 3.3125rem;
  height: 3.3125rem;
  border-radius: 4px;
  background-color: #3F3F3F;
  border: 2px solid #3F3F3F;

  ${UserSportFavXWrapper} {
    display: none;
  }

  ${TooltipBlockWrapper} {
    display: none;
  }

  :not(:last-child) {
    margin-bottom: 0.71rem;
  }

  &:hover {
    border: 2px solid #fff;
    cursor: pointer;

    ${UserSportFavXWrapper} {
      display: flex;
    }

    ${TooltipBlockWrapper} {
      display: flex;
    }
  }
`

export const UserSportFavImgWrapper = styled(ProfileLogo)`
  width: 100%;
  padding: 0.19rem;

  ${({ profileType }) => (
    profileType === ProfileTypes.PLAYERS
      ? 'padding: 0.19rem 0.08rem 0 0.08rem;'
      : ''
  )}
`

type UserSportFavStarProps = {
  marginTop?: number,
}

export const UserSportFavStar = styled.div<UserSportFavStarProps>`
  width: 1.85rem;
  min-height: 1.85rem;
  background: url('/images/sportFavStar.png') no-repeat center / 100%;
  margin-left: 0.15rem;
  margin-bottom: 1.125rem;
  margin-top: ${({ marginTop = 0 }) => marginTop}px;
`

export const FavoriteModal = styled.div`
 width: 411px;
 height: 202px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
`

export const ExclamationSign = styled.div`
  width: 77px;
  height: 66px;
  background: url(/images/exclamation.svg) no-repeat;
  margin-bottom: 20px;
`

export const Text = styled(T9n)`
  text-align: center;
  line-height: 160.2%;
`

export const TournamentNameTooltip = styled.div`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1.5625rem;
  padding: 0 6px;
  line-height: 1.0625rem;
  background-color: #fff;
  border-radius: 6px;
  color: #000;
  font-weight: 400;
  font-size: 0.6875rem;
  overflow: hidden;
  white-space: nowrap;
`