import styled from 'styled-components';
import { breakpoints, colours, fonts } from '@times-components/ts-styleguide';
import { Container } from '../../shared/shared-styles';

const headerGreen = '#6daa84';
const sportBorder = '#c8dfd0';
const rowOdd = '#eff5f2';
const rowEven = '#e4ede8';
const loseColour = '#af1722';

export const PageViewContainer = styled(Container)`
  border-top: none;
`;

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

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

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

      /* Widget title */
      h2 {
        display: none;
      }

      /* Group name headers */
      h3.Opta-groupname {
        height: 24px;
        margin: 0;
        color: ${colours.functional.primary};
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        line-height: 150%;
        font-weight: 500;
        background-color: transparent;
        border: 0;

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

        span {
          float: none;
          padding: 0;
          font-family: 'Roboto', sans-serif;
          font-size: 16px;
          line-height: 150%;
          font-weight: 500;
        }
      }

      .Opta-Cf {
        float: none;
        margin: 0;
        padding: 0;
        background-color: transparent;

        .Opta-Table-Scroll {
          margin-bottom: 16px;

          @media (min-width: ${breakpoints.medium}px) {
            margin-bottom: 32px;
          }
        }

        table {
          width: 100%;
          margin: 0;
          border-collapse: separate;
          border-spacing: 0;

          @media (max-width: ${breakpoints.medium}px) {
            thead tr > :nth-child(8),
            tbody tr > :nth-child(8) {
              display: none;
            }
          }

          @media (max-width: ${breakpoints.small}px) {
            thead tr > :nth-child(n+5),
            tbody tr > :nth-child(n+5) {
              display: none !important;
            }

            thead tr > :nth-child(9),
            tbody tr > :nth-child(9) {
              display: table-cell !important;
            }
          }

          thead {
            background-color: transparent;

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

            tr {
              height: 36px;

              th {
                padding: 0;
                color: ${headerGreen};
                font-family: ${fonts.supporting};
                font-size: 13px;
                line-height: 14px;
                font-weight: normal;
                text-align: center;
                background-color: transparent;

                &:first-child {
                  text-align: left;
                }

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

                abbr {
                  font-size: inherit;
                  line-height: inherit;
                  text-decoration: none;
                }

                &.Opta-Team {
                  width: auto !important;
                }

                &:last-of-type {
                  padding: 0;
                }
              }
            }
          }

          tbody {
            tr {
              height: 48px;
              border: 1px solid ${sportBorder};
              border-bottom: 1px solid ${sportBorder};

              &:nth-child(8) {
                th,
                td {
                  border-bottom: 2px solid ${headerGreen};
                }
              }

              & + tr {
                th,
                td {
                  border-top: 1px solid ${sportBorder};
                }
              }

              &:first-child {
                th,
                td {
                  border-top: 1px solid ${sportBorder};
                }
                th:first-child {
                  border-top-left-radius: 4px;
                }
                td:last-child {
                  border-top-right-radius: 4px;
                }
              }

              &:last-child {
                border-bottom: 1px solid ${sportBorder};

                th:first-child {
                  border-bottom-left-radius: 4px;
                }
                td:last-child {
                  border-bottom-right-radius: 4px;
                }
              }

              th:first-child {
                border-left: 1px solid ${sportBorder};
              }

              td:last-child {
                border-right: 1px solid ${sportBorder};
              }

              &:nth-child(odd) {
                background-color: ${rowOdd};
              }

              &:nth-child(even) {
                background-color: ${rowEven};
              }

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

                  &:nth-child(odd),
                  &:nth-child(even) {
                    background-color: #1b2623;
                  }

                  & + tr th,
                  & + tr td {
                    border-top-color: ${colours.functional.primary};
                  }

                  &:first-child th,
                  &:first-child td {
                    border-top-color: ${colours.functional.primary};
                  }

                  th:first-child {
                    border-left-color: ${colours.functional.primary};
                  }

                  td:last-child {
                    border-right-color: ${colours.functional.primary};
                  }
                }
              `}

              th {
                width: 52px;
                padding: 0;
                color: ${colours.section.sport};
                font-family: 'Roboto', sans-serif !important;
                font-size: 16px;
                line-height: 150%;
                font-weight: 400;
                text-align: left;
                background-color: transparent;
                padding-left: 12px;

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

                @media (min-width: ${breakpoints.medium}px) {
                  width: 52px;
                  font-size: 15px;
                  line-height: 16px;
                }
              }

              td {
                width: 35px !important;
                padding: 0;
                color: ${colours.functional.brandColour};
                font-family: 'Roboto', sans-serif !important;
                font-size: 16px;
                line-height: 150%;
                font-weight: 400;
                text-align: center;
                background-color: transparent;

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

                &:last-of-type {
                  width: 45px !important;
                  padding: 0;
                }

                &.Opta-Team {
                  width: auto !important;
                  font-weight: 500;
                  text-align: left;
                  vertical-align: middle;

                  .Opta-Team-With-Live-Results,
                  .Opta-Team-With-Live-Results div {
                    font-family: 'Roboto', sans-serif !important;
                    font-size: inherit !important;
                    font-weight: inherit !important;
                  }
                }

                &.Opta-points {
                  width: 45px !important;
                  font-weight: 800;
                }

                .Opta-Image,
                .Opta-Image-Holder {
                  width: 24px !important;
                  margin-right: 12px;
                  height: 24px !important;
                  display: inline-block !important;
                  overflow: visible !important;
                  vertical-align: middle;

                  img,
                  .Opta-Image-Team-Small {
                    width: 24px !important;
                    height: 24px !important;
                    max-width: none !important;
                    max-height: none !important;
                    display: inline-block !important;
                  }
                }

                @media (min-width: ${breakpoints.medium}px) {
                  width: 35px !important;
                  font-size: 16px;
                  line-height: 16px;
                }
              }
            }
          }
        }
      }
    }

    /* Key / legend */
    dl.Opta-Key {
      dt {
        font-weight: bold !important;
      }
      dt,
      dd {
        color: #666666;
        margin-top: 10px;
        font-style: normal !important;
        font-size: 10px !important;

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

      @media (max-width: ${breakpoints.medium}px) {
        display: none !important;
      }
    }

    /* Form indicators */
    .Opta-Record {
      min-width: 50px !important;
      width: auto !important;
      display: flex !important;
      justify-content: center !important;
      gap: 4px !important;
      align-items: center !important;

      span.Opta-JS-Tip {
        width: 4px !important;
        height: 12px !important;
        border-radius: 12px !important;
        font-size: 0 !important;
        color: transparent !important;
        overflow: hidden !important;
        position: relative !important;
        cursor: default !important;
        pointer-events: none !important;

        &.Opta-Win {
          background-color: #007a3f !important;
        }

        &.Opta-Draw {
          background-color: #dddddd !important;
        }

        &.Opta-Lose {
          background-color: ${loseColour} !important;
        }

        span,
        .Opta-Hidden,
        h3,
        p,
        abbr,
        * {
          display: none !important;
          visibility: hidden !important;
          pointer-events: none !important;
          z-index: -1 !important;
        }
      }
    }

    /* Status/info text */
    p {
      margin: 16px 0 0 0 !important;
      padding: 0 0 16px 0 !important;
      color: ${colours.functional.secondary};
      font-family: ${fonts.supporting};
      font-size: 13px;
      line-height: 16px;
      text-align: center;
      background: transparent !important;

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