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

export const WidgetContainer = styled.div<{
  isApp: boolean;
}>`

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

  .Opta-Cf.Opta-js-main {
    ${props =>
      props.isApp &&
      `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor};
    }
  `}
  }

  .Opta>.Opta_W {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  // Tabs
  .Opta-Nav {
    background-color: ${backgroundColor};
    border-bottom: 1px solid ${borderColor};
    ${props =>
      props.isApp &&
      `
      @media(prefers-color-scheme: dark) {
        border-color: ${darkBorderColor} !important;
      }
    `}

    ul {
      display: flex;
      justify-content: center;
      gap: 0;
      padding: 16px;
      background-color: ${backgroundColor} !important;
      ${props =>
        props.isApp &&
        `
        @media(prefers-color-scheme: dark) {
          background-color: ${darkBackgroundColor} !important;
        }
      `}

      @media (max-width: ${maxMDBreakpoint}px) {
        padding: 16px 0px;
        padding-inline: 16px;
        overflow: visible !important;
        overflow-x: scroll !important;
        justify-content: flex-start;
        &::-webkit-scrollbar {
          display: none;
        }
      }

      li {
        margin: 0;
        margin-left: 12px;
        border: 1px solid ${borderColor};
        border-radius: 100px;
        overflow: hidden;
        height: 40px;

        &:nth-of-type(1) {
          order: 3;
        }

        &:nth-of-type(2) {
          order: 2;
        }

        &:nth-of-type(3) {
          order: 1;
          margin-left: 0;
        }

        &:nth-of-type(4) {
          order: 4;
        }

        &:nth-of-type(5) {
          order: 5;
        }

        @media(min-width: ${breakpoints.medium}px) {
          &:hover {
            border: 1px solid ${colours.functional.black};
            ${props =>
              props.isApp &&
              `
                @media(prefers-color-scheme: dark) {
                  border: 1px solid ${colours.functional.white};
                }
            `}
          }
        }

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

        @media (max-width: ${maxMDBreakpoint}px) {
          flex: 1;
          overflow: visible !important;
          border: none;
          a {
            border: 1px solid ${borderColor};
            border-radius: 100px;
            ${props =>
              props.isApp &&
              `
                @media(prefers-color-scheme: dark) {
                  border: 1px solid ${darkBorderColor};
                }
            `}
          }
        }

        a {
          -webkit-tap-highlight-color: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          background-color: ${colours.functional.white};
          padding: 2px 20px;
          font-family: Roboto, sans-serif;
          font-size: 14px;
          font-weight: 600;
          transform: translateY(-1px);
          color: ${textColor};
           @media (max-width: ${maxMDBreakpoint}px) {
            padding-inline: 20px !important;
           }

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

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

        &.Opta-On {
          border: 2px solid ${colours.functional.black};
          ${props =>
            props.isApp &&
            `
                @media(prefers-color-scheme: dark) {
                  border: 2px solid ${colours.functional.white};
                }
            `}

          a {
            background-color: ${backgroundColor};
            color: ${textColor};
            ${props =>
              props.isApp &&
              `
                @media(prefers-color-scheme: dark) {
                  background-color: ${darkBackgroundColor};
                }
            `}
            &:hover {
              background-color: ${colours.functional.white};
              ${props =>
                props.isApp &&
                `
                  @media(prefers-color-scheme: dark) {
                    background-color: ${darkBackgroundColor};
                  }
              `}
            }
          }
          @media (max-width: ${maxMDBreakpoint}px) {
            border: none;
            a {
              border: 2px solid ${colours.functional.black};
              ${props =>
                props.isApp &&
                `
                  @media(prefers-color-scheme: dark) {
                    border: 2px solid ${colours.functional.white};
                  }
              `}
            }
          }
        }
      }
    }
  }

  .Opta-Stats-Bars-Text {
    display: block;
    width: 100%;
    text-align: center;
    font-family: Roboto, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: ${textColor};
    &:first-of-type {
      padding-top: 10px;
    }
    @media (max-width: ${maxMDBreakpoint}px) {
      font-weight: 500;
      height: auto !important;
      min-height: 30px;
      // Stops labels overlapping stat numbers
      padding-inline: 88px !important;
    }
    ${props =>
      props.isApp &&
      `
        @media(prefers-color-scheme: dark) {
          color: ${darkTextColor};
        }
    `}
  }

  .Opta-Percent.Opta-Home {
    background: ${homeTeamColor.light} !important;
    ${props =>
      props.isApp &&
      `
        @media(prefers-color-scheme: dark) {
          background: ${homeTeamColor.dark} !important;
        }
    `}
    position: relative;
    &::before {
      content: ' ';
      display: inline-block;
      width: 2px;
      height: 100%;
      background-color: ${backgroundColor};
      ${props =>
        props.isApp &&
        `
          @media(prefers-color-scheme: dark) {
            background-color: ${darkBackgroundColor};
          }
      `}
      position: absolute;
      left: 0;
      top: 0;

      @media (max-width: ${maxMDBreakpoint}px) {
        width: 1px;
      }
    }
  }
  .Opta-Percent.Opta-Away {
    background: ${awayTeamColor.light} !important;
    ${props =>
      props.isApp &&
      `
        @media(prefers-color-scheme: dark) {
          background: ${awayTeamColor.dark} !important;
        }
    `}
    padding-right: 3px;
    position: relative;
    &::after {
      content: ' ';
      display: inline-block;
      width: 2px;
      height: 100%;
      background-color: ${backgroundColor};
      ${props =>
        props.isApp &&
        `
          @media(prefers-color-scheme: dark) {
            background-color: ${darkBackgroundColor};
          }
      `}
      position: absolute;
      right: 0;
      top: 0;
      @media (max-width: ${maxMDBreakpoint}px) {
        width: 1px;
      }
    }
  }

  .Opta-Stats-Bars {
    margin-top: 12px;

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

    tr {
      display: flex;
      align-items: center;

      //  Home team stat label
      td:nth-of-type(1) {
        order: 1;
        color: ${homeTeamColor.light};
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
              color: ${homeTeamColor.dark};
            }
        `}
        &.Opta-Outer-bigger {
          border-radius: 100px;
          background-color: ${homeTeamColor.light};
          ${props =>
            props.isApp &&
            `
              @media(prefers-color-scheme: dark) {
                background-color: ${homeTeamColor.dark};
              }
          `}
        }
         @media (max-width: ${maxMDBreakpoint}px) {
          color: ${textColor};
          justify-content: flex-start;
          ${props =>
            props.isApp &&
            `
            @media(prefers-color-scheme: dark) {
                color: ${darkTextColor};
            }
          `}
          left: 0;
          transform: translateY(-25px);
          &.Opta-Outer-bigger {
            background-color: unset;
          }
        }
      }

      //  Stat bar
      td:nth-of-type(2) {
        order: 2;
        width: 100%;
        padding-inline: 0px;
        @media (max-width: ${maxMDBreakpoint}px) {
          padding-inline: 16px;
        }
        .Opta-Bars-Full {
          display: flex;
          flex-direction: row;
          border-radius: 100px;
          height: 8px;
          .Opta-Percent {
            height: 8px;
          }
        }
      }

      //  Away team stat label
      td:nth-of-type(3) {
        order: 3;
        color: ${awayTeamColor.light};
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
              color: ${awayTeamColor.dark};
            }
        `}
        &.Opta-Outer-bigger {
          background-color: ${awayTeamColor.light};
          ${props =>
            props.isApp &&
            `
              @media(prefers-color-scheme: dark) {
                background-color: ${awayTeamColor.dark};
              }
          `}
        } 

        @media (max-width: ${maxMDBreakpoint}px) {
          color: ${textColor};
          justify-content: flex-end;
          ${props =>
            props.isApp &&
            `
            @media(prefers-color-scheme: dark) {
                color: ${darkTextColor};
            }
          `}
          right: 0;
          transform: translateY(-25px);
          &.Opta-Outer-bigger {
            background-color: unset;
          }
        }
      }
    }
    
    .Opta-Outer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Roboto, sans-serif;
        font-weight: 800;
        font-size: 16px !important;
        padding: 8px 10px !important;
        margin-inline: 20px;
        margin-top: 2px;
        width: auto !important;
        min-width: 65px;

        @media (max-width: ${maxMDBreakpoint}px) {
          position: absolute;
          padding: 0px !important;
          font-weight: 600;
        }

        @media (min-width: ${breakpoints.medium}px) {
          &.Opta-Outer-bigger {
            color: white;
            border-radius: 100px;
          }
        }
      }
  }
`;