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

import isUndefined from 'lodash/isUndefined'

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

import { Logo } from 'features/Logo'

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

const defaultHeaderStyles = (color: string = DEFAULT_HEADER_COLOR) => css`
  background: linear-gradient(
    187deg,
    ${color} -4.49%,
    #000000 68.29%),
    #000000;
  z-index: 10;
`

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

export const HeaderStyled = styled.header<HeaderProps>`
  position: relative;
  display: flex;
  justify-content: center;
  height: ${({ height = 8.5 }) => height}rem;
  
  ${({ color, headerImage }) => (headerImage
    ? css`background: url(${headerImage});`
    : client.styles.homePageHeader || defaultHeaderStyles(color)
  )}
  
  ${isMobileDevice
    ? css`
     height: 124px;
    
     @media screen and (orientation: landscape){
       height: 121px;
     }
    `
    : ''}
`

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

export const HeaderGroup = styled.div<Props>`
  display: flex;
  
  ${({ height }) => (height ? `height: ${height}rem` : '')};
  ${({ marginTop }) => (marginTop ? `margin-top: ${marginTop}rem` : '')};
  
  ${isMobileDevice
    ? css`
      position: relative;
      justify-content: flex-end;
    `
    : ''};
`

export const HeaderLogo = styled(Logo)`
  margin-top: 4px;
  
  ${({ isMatchPage }) => (isMatchPage ? css`
    width: ${client.styles.matchLogoWidth}rem;
    height: ${client.styles.matchLogoHeight}rem;
  ` : '')}
  
  ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        width: 85px;
        height: 20px;
        left: 48vw;
        top: 5px;
        transform: translateX(-50%);
        position: absolute;
      }
    
      @media (orientation: landscape){
        left: 42vw;
        width: 97px;
        height: 23px;
        margin-top: 0;
        position: absolute;
      }
    `
    : ''}
`

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

export const Position = styled.div<PositionProps>`
  position: absolute;
  
  top: ${({ isMatchPage }) => (
    isMatchPage ? client.styles.matchLogoTopMargin : ''
  )}rem;
  
  ${({ left }) => (isUndefined(left) ? '' : `left: ${left}rem`)};
  ${({ right }) => (isUndefined(right) ? '' : `right: ${right}rem`)};
`