import styled from 'styled-components';
import { colours } from '@times-components/ts-styleguide';
import { Container } from '../../shared/shared-styles';
import { leftArrow, rightArrow } from '../../assets/optaArrows';

const sportBorder = '#c8dfd0';
const cardBg = '#eff5f2';

const leftArrowWhite = leftArrow.replace("fill='black'", "fill='white'");
const rightArrowWhite = rightArrow.replace("fill='black'", "fill='white'");

export const PageViewContainer = styled(Container)<{ isApp?: boolean }>`
  border-top: none;
  background-color: transparent;

  ${props =>
    props.isApp &&
    `
    @media (prefers-color-scheme: dark) {
      background-color: #121212;
    }
  `};
`;

export const WidgetContainer = styled.div<{ isApp?: boolean }>`
  background-color: ${colours.functional.white};
  overflow-x: hidden;

  ${props =>
    props.isApp &&
    `
    @media (prefers-color-scheme: dark) {
      background-color: #121212;

      .Opta-TournamentTreeSVG {
        background-color: #121212;
      }

      .Opta:not(:has(.Opta-Cf)) {
        background-color: #121212 !important;
        color: #ffffff !important;

        * {
          background-color: #121212 !important;
          color: #ffffff !important;
        }
      }
    }
  `}

  .Opta {
    /* Hide Opta loading bars SVG */
    p.Opta-Load {
      background: transparent !important;
    }

    .Opta_W {
      margin: 0;
      background-color: transparent;

      > div {
        padding: 0 !important;
      }

      /* Hide widget title */
      h2 {
        display: none;
      }

      .Opta-TournamentTree-Container {
        margin-left: 0 !important;
        padding-bottom: 130px;
      }

      .Opta-TournamentTreeSVG {
        overflow: visible !important;
      }

      /* Round navigation scroller */
      .Opta-TournamentTree-Scroller {
        background-color: transparent !important;
        margin-top: 0 !important;
        border-bottom: 1px solid ${sportBorder};
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 12px 0 !important;
        box-sizing: border-box;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        ${props =>
          props.isApp &&
          `
          @media (prefers-color-scheme: dark) {
            background-color: #121212 !important;
            border-bottom-color: ${colours.functional.primary};
          }
        `}

        .Opta-TournamentTree-Scroller-Space {
          background-color: ${colours.functional.white} !important;
          flex: 1;

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

          p {
            color: #007A3F !important;
            font-family: 'Roboto', sans-serif;
            font-size: 16px;
            font-weight: 600;
            background: transparent !important;

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

        .Opta-TournamentTree-Scroller-Previous,
        .Opta-TournamentTree-Scroller-Next {
          cursor: not-allowed;
          background-color: ${colours.functional.white} !important;
          background-image: none !important;
          border: 1px solid ${sportBorder} !important;
          border-radius: 50% !important;
          height: 40px;
          width: 40px;
          min-width: 40px;
          min-height: 40px;
          flex-shrink: 0;
          align-self: center;
          background-repeat: no-repeat !important;
          background-position: center !important;
          background-size: 7px 12px !important;
          opacity: 0.45;
          pointer-events: none;

          ${props =>
            props.isApp &&
            `
            @media (prefers-color-scheme: dark) {
              background-color: #1e1e1e !important;
              border-color: ${colours.functional.primary} !important;
            }
          `}

          &::before,
          &::after {
            content: none !important;
            display: none !important;
          }

          &.Opta-TournamentTree-Scroller-Active {
            cursor: pointer;
            opacity: 1;
            pointer-events: auto;
          }
        }

        .Opta-TournamentTree-Scroller-Previous {
          background-image: url("${leftArrow}") !important;

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

        .Opta-TournamentTree-Scroller-Next {
          background-image: url("${rightArrow}") !important;

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

      /* SVG connector lines */
      .Opta-TournamentTree-ConnectLine {
        stroke: ${sportBorder} !important;
        fill: none !important;

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

      /* Third place label */
      .Opta-TournamentTree-ThirdPlace {
        color: ${colours.functional.secondary} !important;
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;

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

      /* Fixture scorebox cards */
      .Opta-TournamentTree-Scorebox {
        background-color: ${cardBg} !important;
        border: 1px solid ${sportBorder} !important;
        border-radius: 4px !important;
        overflow: hidden;
        height: 100%;
        box-sizing: border-box;
        padding: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        ${props =>
          props.isApp &&
          `
          @media (prefers-color-scheme: dark) {
            background-color: #1b2623 !important;
            border-color: ${colours.functional.primary} !important;
          }
        `}

        /* Date / time header */
        .Opta-TournamentTree-Scorebox-Date {
          border-bottom: none;
          padding: 0 8px;
          background-color: transparent !important;
          display: flex;
          align-items: center;
          justify-content: space-between;

          ${props =>
            props.isApp &&
            `
            @media (prefers-color-scheme: dark) {
              border-bottom-color: ${colours.functional.primary};
            }
          `}

          .Opta-Date {
            color: ${colours.functional.primary} !important;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            font-weight: 500;
            line-height: 150%;

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

          .Opta-TournamentTree-Scorebox-ResultTime {
            color: ${colours.section.sport} !important;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            font-weight: 500;
            line-height: 150%;

            abbr {
              text-decoration: none;
            }
          }
        }

        /* Live status override */
        &.Opta-Live .Opta-TournamentTree-Scorebox-Date {
          .Opta-TournamentTree-Scorebox-ResultTime {
            color: #FF0000 !important;
          }
        }

        /* Team rows */
        .Opta-TournamentTree-Scorebox-Team {
          padding: 4px 8px;
          border-radius: 4px;
          background-color: ${colours.functional.white} !important;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 32px;
          box-sizing: border-box;

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

          & + .Opta-TournamentTree-Scorebox-Team {
            margin-top: 8px;
          }

          .Opta-Score {
            color: ${colours.functional.brandColour} !important;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            font-weight: 500 !important;
            line-height: 150%;
            display: flex;
            align-items: center;
            justify-content: flex-end;

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

          .Opta-Team {
            color: ${colours.functional.brandColour} !important;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            font-weight: 500;
            line-height: 150%;
            display: flex;
            align-items: center;

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

            /* Crest images */
            .Opta-Image {
              display: inline-block !important;
              vertical-align: middle;
              margin-right: 12px;
              padding: 0 !important;

              .Opta-Image-Holder {
                width: 24px !important;
                height: 24px !important;
                display: inline-block !important;
                vertical-align: middle;

                img {
                  width: 24px !important;
                  height: 24px !important;
                  max-width: none !important;
                  max-height: none !important;
                  display: inline-block !important;
                }
              }
            }
          }
        }
      }
    }
  }
`;