import styled from 'styled-components';
import { colours } from '@times-components/ts-styleguide';
import {
  borderColor,
  darkBackgroundColor,
  darkTextColor,
  darkBorderColor
} from '../shared/styles';
import { TeamColor } from '../shared/types';

export const XGWrapper = styled.div<{ isApp: boolean }>`
  background-color: ${colours.functional.greenLight};
  display: grid;
  grid-template-areas:
    'home title away'
    'bar bar bar';
  grid-template-columns: auto 1fr auto;
  align-items: center;
  row-gap: 12px;
  padding: 12px 16px;

  @media (min-width: 768px) {
    row-gap: 4px;
    padding: 0 16px;
    grid-template-areas:
      '. title .'
      'home bar away';
    grid-template-columns: 65px 1fr 65px;
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
      color: ${darkTextColor} !important;
      border-color: ${darkBorderColor} !important;
    }
  `};
`;

export const XGTitle = styled.h3<{ isApp: boolean }>`
  grid-area: title;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #000000;

  @media (min-width: 768px) {
    font-weight: 600;
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${darkTextColor} !important;
    }
  `};
`;

export const XGValueBadge = styled.span<{
  area: 'home' | 'away';
  isWinner: boolean;
  teamColor: TeamColor;
  isApp: boolean;
}>`
  grid-area: ${({ area }) => area};
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  color: #000000;

  @media (min-width: 768px) {
    color: ${({ isWinner, teamColor }) =>
      isWinner ? colours.functional.white : teamColor.light};
    background-color: ${({ isWinner, teamColor }) =>
      isWinner ? teamColor.light : 'transparent'};
    border-radius: 20px;
    padding: 4px 10px;
    min-width: 27px;
    box-sizing: border-box;
    text-align: center;
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${colours.functional.white};
      background-color: transparent;
    }
  `};
`;

export const XGBarTrack = styled.div`
  grid-area: bar;
  display: flex;
  height: 8px;
  gap: 3px;

  @media (min-width: 768px) {
    margin-inline: 20px;
  }
`;

export const XGBarFill = styled.div<{
  side: 'home' | 'away';
  percent: number;
  teamColor: TeamColor;
  isApp: boolean;
}>`
  width: ${({ percent }) => percent}%;
  height: 100%;
  background-color: ${({ teamColor }) => teamColor.light};
  border-radius: ${({ side }) =>
    side === 'home' ? '4px 2px 2px 4px' : '2px 4px 4px 2px'};
  transition: width 0.4s ease;

  ${({ isApp, teamColor }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${teamColor.dark} !important;
    }
  `};
`;

export const XGGroupContainer = styled.div<{
  isApp: boolean;
  hasBorder?: boolean;
}>`
  background-color: #e5f0ea !important;
  ${({ hasBorder }) =>
    hasBorder &&
    `
    border: 1px solid ${borderColor};
    border-radius: 8px;
  `};

  @media screen and (max-width: 767px) {
    background-color: ${colours.functional.white} !important;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
      border-color: ${darkBorderColor} !important;
    }
  `};
`;

export const XGGroupItem = styled.div<{ isLast: boolean; isApp: boolean }>`
  padding-top: 10px;
  background-color: #e5f0ea;
  &:first-child {
    padding-top: 20px;
  }

  ${({ isLast }) =>
    isLast && 'padding-bottom: 20px;'} @media screen and (max-width: 767px) {
    background-color: ${colours.functional.white};
  }

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
    }
  `};
`;

export const XGGroupLoadingWrapper = styled.div`
  position: relative;
  width: 100%;
`;

export const XGGroupStateOverlay = styled.div`
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
`;

export const XGGroupSkeletonRow = styled.div`
  min-height: 56px;

  @media (min-width: 768px) {
    min-height: 50px;
  }
`;

export const XGGroupTeamHeader = styled.div<{ isApp: boolean }>`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
    }
  `};
`;

export const XGGroupTeamName = styled.span<{
  teamColor: TeamColor;
  isApp: boolean;
}>`
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: ${({ teamColor }) => teamColor.light};

  ${({ isApp, teamColor }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${teamColor.dark} !important;
    }
  `};
`;

export const XGGroupStateMessage = styled.p<{ isApp: boolean }>`
  margin: 0;
  padding: 20px 16px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #000000;

  ${({ isApp }) =>
    isApp &&
    `
    @media(prefers-color-scheme: dark) {
      color: ${darkTextColor} !important;
    }
  `};
`;