spa_instat_tv/src/features/HeaderMobile/styled.tsx

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

import isUndefined from 'lodash/isUndefined'

import { client } from 'config/clients'
import { isMobileDevice } from 'config/userAgent'
import { ClientNames } from 'config/clients/types'

import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { customScrollbar } from 'features/Common'

export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'

export const defaultHeaderStyles = (
  color: string = DEFAULT_HEADER_COLOR,
  headerImage: string | undefined | null,
) => {
  if ([
    ClientNames.Lff,
    ClientNames.Tunisia,
    ClientNames.Facr,
    ClientNames.Fqtv,
  ].includes(client.name)) {
    return client.styles.homePageHeader
  }

  if (headerImage && (client.name === 'instat' || client.name === 'insports')) {
    return css`background: url(${headerImage}.png);
      background-size: 100% 100%;
      @media (max-width: 450px){
        background: url(${headerImage}_mobile.png);
        background-size: 100% 100%;
      }
      `
  }
  if (color.includes('linear-gradient')) {
    return css`
      background: ${color};
      z-index: 10;
  `
  }
  return css`
    background: linear-gradient(
      236deg,
      ${color} -4.49%,
      #000000 50%),
      #000000;
    z-index: 10;
  `
}

type HeaderProps = {
  color?: string,
  headerImage?: string | null,
  height?: number,
}

export const HeaderStyled = styled.header<HeaderProps>`
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: ${({ height = 8.5 }) => height}rem;
  ${isMobileDevice
    ? css`
      height: 124px;
    `
    : ''};

  ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}

  ${isMobileDevice
    ? css`
      padding: 8px;
      margin-bottom: 50px;
      justify-content: flex-start;
      `
    : ''}
`

type Props = {
  height?: number,
  marginTop?: number,
}

export const HeaderGroup = styled.div<Props>`
  display: flex;
  flex-direction: row;
  align-items: center;

  ${({ height }) => (height ? `height: ${height}rem` : '')};
  ${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};

  ${isMobileDevice
    ? css`
      position: relative;
      justify-content: space-between;
      width: 100%;

      :only-child {
        flex-basis: 100px;
      }
    `
    : ''};
`

type PositionProps = {
  isMatchPage?: boolean,
  left?: number,
  right?: number,
  top?: number,
}

export const Position = styled.div<PositionProps>`
  position: absolute;

  top: ${({ isMatchPage, top = 1.14 }) => (
    isMatchPage
      ? client.styles.matchLogoTopMargin ?? top
      : top
  )}rem;

  ${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
  ${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
`

export const ScSportsWrapper = styled.div`
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;

  ${isMobileDevice
    ? css`
      top: 110px;
      padding: 10px;
      justify-content: space-between;
      width: 100%;
     /* right: -10px;
     width: 95vw;
     bottom: -90px; */
    `
    : ''};
`

export const ScModal = styled(BaseModal)`
  background-color: rgba(0, 0, 0, 0.7);

  ${ModalWindow} {
    min-width: 280px;
    max-height: 250px;
    border-radius: 0px;
    padding: 0;
    ${customScrollbar}

    overflow-y: auto;
    ${isMobileDevice
    ? css`
        height: auto;
        top: -140px;
    `
    : ''};
  }
`
export const ScHeaderTitle = styled.span`
  font-weight: 700;
  font-size: 10px;
  line-height: 24px;
  color: #FFFFFF;
  ${isMobileDevice
    ? css`
        font-size: 10px;
        line-height: 20px;

      @media (orientation: landscape) {
        font-size: 10px;
      }
    `
    : ''};
`

export const ScHeaderGroup = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 10px;
  border-bottom: 1px solid #505050;
  
  ${isMobileDevice
    ? css`
        font-size: 10px;
        line-height: 20px;

      @media (orientation: landscape) {
        font-size: 10px;
      }
    `
    : ''};
`
export const ScBody = styled.div`
  display: flex;
  flex-direction: column;
  padding: 0 15px 23px 15px;
`

type SportProps = {
  active: boolean,
}
export const ScSport = styled.div<SportProps>`
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  opacity: ${({ active }) => (active ? 1 : 0.5)};
  margin-top: 18px;
  cursor: pointer;
`

export const ScoreSwitchWrapper = styled.div`
  margin-left: auto;
`