spa_instat_tv/src/features/ProfileHeader/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 { Logo } from 'features/Logo'
import { ScoreSwitch } from 'features/MatchSwitches'

import { isMatchPage } from 'helpers/isMatchPage'

export const DEFAULT_HEADER_COLOR = client.styles.homePageHeader?.toString() || 'rgba(53, 96, 225, 0.56)'

export const defaultHeaderStyles = (
  color: string | undefined = DEFAULT_HEADER_COLOR,
  headerImage: string | undefined | null,
) => {
  if ([
    ClientNames.Lff,
    ClientNames.Tunisia,
    ClientNames.Facr,
    ClientNames.Fqtv,
  ].includes(client.name)
    && !isMatchPage()) {
    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) {
    return css`
      background: linear-gradient(
        187deg,
        ${color} -4.49%,
        #000000 68.29%),
        #000000;
      z-index: 10;
    `
  }

  return css`
    background: linear-gradient(
      187deg,
      ${DEFAULT_HEADER_COLOR} -4.49%,
      #000000 68.29%),
      #000000;
      z-index: 10;
   `
}

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

export const HeaderStyled = styled.header<HeaderProps>`
  position: relative;
  display: flex;
  justify-content: center;
  height: ${({ height = 8.5 }) => height}rem;

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

  ${({ color }) => (
    client.name === ClientNames.Lff
    || client.name === ClientNames.Facr
    || client.name === ClientNames.Fqtv
    || client.name === ClientNames.Tunisia
      ? css`
           background: linear-gradient(187deg, ${color} -4.49%, #000000 68.29%), #000000; 
            z-index: 10;
      ` : ''
  )}
  
  ${isMobileDevice
    ? css`
      height: ${() => (isMatchPage() ? '40px' : '114px')};
      padding: 8px;
    `
    : ''}
`

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

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

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

  ${isMobileDevice
    ? css`
      position: relative;
      justify-content: flex-end;
    `
    : ''};
`

export const HeaderLogo = styled(Logo)`
  ${() => (isMatchPage() ? css`
    width: ${client.styles.matchLogoWidth}rem;
    height: ${client.styles.matchLogoHeight}rem;

    ${isMobileDevice ? css`
      left: 48vw;
      top: 5px;
      transform: translateX(-50%);
      position: absolute;

      ${client.styles.matchPageMobileHeaderLogo}      
    ` : ''}
  ` : css`
    ${isMobileDevice ? css`
      ${client.styles.mobileHeaderLogo}

      @media (max-width: 450px){
        left: 48vw;
        top: 5px;
        transform: translateX(-50%);
        position: absolute;

        ${client.styles.matchPageMobileHeaderLogo}   
      }
    ` : ''}
  `)} 
`

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

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

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

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

export const ScSwitch = styled(ScoreSwitch)`
  position: absolute;
  top: 400px;
`