import styled from 'styled-components';
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
import {
  backgroundColor,
  darkBackgroundColor,
  darkTextColor,
  borderColor,
  maxMDBreakpoint,
  textColor,
  darkBorderColor,
  homeTeamColor,
  awayTeamColor
} from '../shared/styles';

export const LoadingWrapper = styled.div`
  position: relative;
  min-height: 157px;
  overflow: hidden;
`;

export const WidgetContainer = styled.div<{
  isApp: boolean;
}>`
  background-color: ${backgroundColor};
  border: 1px solid ${borderColor};
  border-radius: 8px;
  ${props =>
    props.isApp &&
    `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor} !important;
      color: ${darkTextColor} !important;
      border-color: ${darkBorderColor} !important;
    }
  `}

  @media (max-width: ${maxMDBreakpoint}px) {
    border-radius: 8px 8px 0 0;
  }

  .Opta>.Opta_W {
    margin-bottom: 0px !important;
    border-radius: 8px;
  }

  .Opta-MatchHeader tbody {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid ${borderColor};

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

    // Score row
    tr:nth-of-type(1) {
      order: 2;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-inline: 20px;

       @media (max-width: ${maxMDBreakpoint}px) {
        position: relative;
        justify-content: center;
        padding-inline: 0px;
        padding-bottom: 30px;

        .Opta-Crest, .Opta-Crest img {
          padding: 0;
          height: 44px;
          width: 44px;
        }
        .Opta-Crest.Opta-Home {
          margin-left: 16px;
          margin-right: auto;
          
        }
        .Opta-Crest.Opta-Away {
          margin-right: 16px;
          margin-left: auto;
        }
       }

      td {
        height: auto;
        @media (max-width: ${maxMDBreakpoint}px) {   
          padding-top: 16px;
          padding-inline: 16px;
          padding-bottom: 0px;

          &.Opta-Divider.Opta-Versus {
            padding-bottom: 16px;
            padding-inline: 0;
          }
        }
      }

      .Opta-Team {
        flex: 1;
        font-family: ${fonts.headline};
        font-size: 20px;
        font-weight: 800;
        color: ${textColor};
        
        @media (min-width: ${1024}px) {
          font-size: 24px;
        }

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

        @media (max-width: ${maxMDBreakpoint}px) {
          position: absolute;
          bottom: 0;
          width: 50%;
          &.Opta-Home {
            left: 0px;
            text-align: left;
          }
          &.Opta-Away {
            right: 0px;
            text-align: right;
          }

          font-family: ${fonts.supporting};
          font-size: 16px;
          font-weight: 700;
        }
      }

      .Opta-Score {
        padding: 0;
        margin-inline: 16px;
        height: 64px;
        width: 64px;
        @media (max-width: ${maxMDBreakpoint}px) {
          height: 44px;
          width: 44px;
          margin-inline: 8px;
        }
        &.Opta-Home span {
          background-color: ${homeTeamColor.light} !important;
          ${props =>
            props.isApp &&
            `
            @media(prefers-color-scheme: dark) {
              background-color: ${homeTeamColor.dark} !important;
            }
          `}
        }
        &.Opta-Away span {
          background-color: ${awayTeamColor.light} !important;
          ${props =>
            props.isApp &&
            `
            @media(prefers-color-scheme: dark) {
              background-color: ${awayTeamColor.dark} !important;
            }
          `}
        }
      }

      .Opta-Team-Score {
        float: none !important;
        display: flex;
        height: 64px;
        align-items: center;
        justify-content: center;

        font-size: 40px;
        font-weight: 800;
        font-family: ${fonts.headline};
        color: ${colours.functional.white};
        border-radius: 8px;
        padding: 0;

        @media (max-width: ${maxMDBreakpoint}px) {
          height: 44px;
          width: 44px;
          font-size: 24px;
        }
      }

      @media (max-width: ${maxMDBreakpoint}px) {   
        .Opta-Divider.Opta-Dash {
          display: none;
        }
      }
    }

    // HT row
    tr:nth-of-type(2) {
      order: 3;
      padding: 0;
      margin-top: 12px;
      margin-bottom: 4px;
      @media (max-width: ${maxMDBreakpoint}px) { 
        margin-top: 12px;
      }
      &.Opta-Score-Extras {
        td {
          visibility: hidden;
        }

        td:has(.Opta-HT-Wrapper) {
          visibility: visible;
        }

        span, abbr {
          font-family: ${fonts.supporting};
          font-size: 14px;
          color: ${textColor};
          ${props =>
            props.isApp &&
            `
            @media(prefers-color-scheme: dark) {
              color: ${darkTextColor} !important;
            }
          `}
          margin-top: 16px;

          @media (max-width: ${maxMDBreakpoint}px) {
            font-family: ${fonts.supporting};
            font-size: 14px;
            font-weight: 700;
          }
        }

        abbr {
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .Opta-HT-Wrapper {
          display: flex;
          align-items: center;
          gap: 6px;
          font-family: Roboto, sans-serif;
          font-weight: 400;
          font-size: 16px;
          line-height: 150%;

          span {
            margin: 0 !important;
            border: none !important;
            &::before, &::after {
              display: none !important;
            }
          }
        }
      }
    }
    
    // Header details row
    tr:nth-of-type(3) {
      order: 1;
      display: flex;
      width: 100%;
      justify-content: center;
      padding-bottom: 14px;

      span {
        letter-spacing: 1px;
      }

      @media (max-width: ${maxMDBreakpoint}px) {
        padding-bottom: 8px;
      }
    }

    .Opta-MatchHeader-Venue, .Opta-Competition {
      @media (max-width: ${maxMDBreakpoint}px) {
        display: none;
      }
    }
  }

  tr.Opta-MatchHeader-Details {
    td > div {
      background-color: ${backgroundColor} !important;
      ${props =>
        props.isApp &&
        `
        @media(prefers-color-scheme: dark) {
          background-color: ${darkBackgroundColor} !important;
          color: ${darkTextColor} !important;
        }
      `}
    }

    span {
      margin: 0 4px !important;
      letter-spacing: 5%;
    }
    
    .Opta-Date {
      @media (min-width: ${breakpoints.medium}px) {
        font-weight: 700;
        &::before {
          content: '- ';
        }
      }
    }

    .Opta-MatchHeader-VenueLabel {
      font-weight: 700;
    }
    
    font-family: ${fonts.supporting};
    font-size: 12px;
    color: ${textColor};
    ${props =>
      props.isApp &&
      `
      @media(prefers-color-scheme: dark) {
        color: ${darkTextColor} !important;
      }
    `}
    text-transform: uppercase;
  }

  .Opta-Matchdata {
    display: none;
  }

  // Pre-game: hide empty events area and tbody border
  .Opta-Cf[data-period="PreMatch"] {
    > .Opta-Cf {
      display: none !important;
    }

    .Opta-MatchHeader tbody {
      border-bottom: none !important;
    }
  }

  .Opta-Cf {
    padding-bottom: 0px !important;

    // Collapse empty events area (e.g. 0-0 matches with no goals)
    > .Opta-Cf:not(:has(li)) {
      display: none !important;
    }

    // Remove bottom border when no events are shown
    &:not(:has(.Opta-Cf li)) {
      .Opta-MatchHeader tbody {
        border-bottom: none !important;
      }
    }

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

    .Opta-Event-Text {
      display: flex;
      align-items: center;

      &.Opta-Home {
        li {
          flex-direction: row-reverse;
        }
      }
    }

    @media (max-width: ${maxMDBreakpoint}px) {
      .Opta-Events {
        li {
          display: flex;
          text-align: right;
        }

        &.Opta-Home {
          .Opta-Event-Player {
            text-align: left;
          }
        }

        &.Opta-Away {
          .Opta-Event-Player {
            text-align: right;
          }
        }
      }

      .Opta-Event-Text {
        display: flex;
        align-items: center;

        &.Opta-Home {
          li {
            flex-direction: row-reverse;
          }
        }
      }
    }

    .Opta-Events.Opta-Home {
      padding-right: 20px;

      @media (max-width: ${maxMDBreakpoint}px) {
        padding-right: 0;
        li {
          float: left !important;
          .Opta-Icon {
            display: block;
            aspect-ratio: 1 / 1;
            padding-left: 2px;
            margin-left: 16px !important;
            margin-right: 12px !important;
          }
          .Opta-Event-Time {
            margin-right: 4px !important;
          }
        }  
      }
    }

    .Opta-Events.Opta-Away {
      padding-left: 20px;
      @media (max-width: ${maxMDBreakpoint}px) {
        padding-left: 0;
        li {
          flex-direction: row-reverse;
          float: right !important;
          .Opta-Icon {
            display: block;
            aspect-ratio: 1 / 1;
            padding-right: 2px;
            margin-right: 16px !important;
            margin-left: 12px !important;
          }
          .Opta-Event-Time {
            font-size: 12px;
            margin-left: 4px !important;
          }
        }  
      }
    }

    .Opta-Event-Text span {
      font-family: ${fonts.supporting};
      font-size: 14px;
      color: ${textColor};
      ${props =>
        props.isApp &&
        `
        @media(prefers-color-scheme: dark) {
          color: ${darkTextColor} !important;
        }
      `}
      font-weight: 400;
    }

    .Opta-Event-Time {
      &::before {
          content: "(";
        }
        &::after {
          content: ")";
        }
      }

    .Opta-shootout .Opta-Event-Time {
      display: none !important;
    }
  }
`;