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

import { isMobileDevice } from 'config'

import {
  ClientConfig,
  ClientIds,
  ClientNames,
} from './types'

const Background = styled.div`
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), 
    linear-gradient(0deg, #0061DC, #0061DC), 
    no-repeat center center url(/images/fqtv-background.png);
  background-size: 130% 105%;
  background-blend-mode: normal, hard-light, normal;  
`

export const fqtv: ClientConfig = {
  auth: {
    clientId: ClientIds.Fqtv,
  },
  background: Background,
  currencyBadge: {
    color: '#333333',
    secondColor: 'rgba(255, 255, 255, 0.7)',
    sign: 'Dollar',
  },
  defaultLanguage: 'en',
  description: 'Queensland’s streamed competitions, including NPL Men, NPL Women and McDonald\'s FQPL Leagues.',
  disabledPreferences: true,
  name: ClientNames.Fqtv,
  privacyLink: '/clients/insports/privacy-policy-and-statement.html',
  showSearch: true,
  showSmartBanner: true,
  styles: {
    background: '',
    centerBlock: css`
      margin-top: 9.15rem;
      ${isMobileDevice ? css`
        margin-top: 107px;
        @media screen and (orientation: landscape) {
          width: 290px;
          margin: auto;
        }
      ` : ''};
    `,
    forgotPasswordInput: css`
      border: none;
    `,
    homePageHeader: css`
      background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), 
      linear-gradient(0deg, #0061DC, #0061DC), 
      no-repeat center center url(/images/fqtv-background.png);
      background-size: 130% 105%;
      background-blend-mode: normal, hard-light, normal;
    `,
    input: css`
      background-color: transparent;
      :not(:last-of-type) {
        border-color: ${({ theme }) => theme.colors.white};
      }
    `,
    inputGroup: css`
      border: 1px solid ${({ theme }) => theme.colors.white};
    `,
    logo: 'fqtv-logo.svg',
    logoAuth: css`
      background-image: url(/images/fqtv-auth-logo.svg);
      background-position: center;
      height: 142px;
      width: 378px;
      margin-bottom: 1.82rem;
      
      ${isMobileDevice ? css`
          margin-bottom: 15px;
          width: 200px;
          height: 74px;
        ` : ''}
    `,
    logoHeight: 2.465,
    logoLeft: 0.71,
    logoTop: 1,
    logoWidth: 6.37,
    matchLogoHeight: 2.465,
    matchLogoWidth: 6.37,
    matchPageMobileHeaderLogo: css`
      width: 90px;
      height: 27px;
      top: 0;
    `,
    mobileHeaderLogo: css`
      width: 86px;
      height: 33px;
    `,
    submitButton: css`
      :disabled {
        background: #FFFFFF;
        color: #00244F;
      }
    `,
    userAccountLogo: css`
      width: 6.37rem;
      height: 2.465rem;
    `,
  },
  termsLink: '/clients/insports/terms-and-conditions.html',
  title: 'FQTV is the official home of Football',
}