import styled from 'styled-components';
import { breakpoints } from '@times-components/ts-styleguide';
import { darkBackgroundColor, darkTextColor } from '../shared/styles';

export const WidgetContainer = styled.div<{
  isApp: boolean;
}>`
  max-width: 758px;
  padding: 0 16px;
  margin: 0 auto;

  .Opta div,
  .Opta span,
  .Opta h2,
  .Opta h3,
  .Opta h4,
  .Opta p,
  .Opta a,
  .Opta abbr,
  .Opta img,
  .Opta dl,
  .Opta dt,
  .Opta dd,
  .Opta ul,
  .Opta ol,
  .Opta li,
  .Opta form,
  .Opta fieldset,
  .Opta figure,
  .Opta figcaption,
  .Opta label,
  .Opta legend,
  .Opta table,
  .Opta tbody,
  .Opta thead,
  .Opta tfoot,
  .Opta tr,
  .Opta th,
  .Opta td,
  .Opta canvas {
    font-size: 14px !important;
    font-family: Roboto, sans-serif !important;
  }

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

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

  dl.Opta-Key {
    ${props =>
      props.isApp &&
      `
    @media(prefers-color-scheme: dark) {
      background-color: ${darkBackgroundColor};
      dt, dd {
      color: #999999 !important;
      }
    }
  `} dt {
      font-weight: bold !important;
    }
    dt,
    dd {
      color: #666666;
      margin-top: 10px;
      font-style: normal !important;
      font-size: 10px !important;
    }

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

  table.Opta-Striped {
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    ${props =>
      props.isApp &&
      `
        @media(prefers-color-scheme: dark) {
          background-color: ${darkBackgroundColor};
          .Opta-Bars-Full {
            background-color: ${darkBackgroundColor} !important;
          }
          
          thead tr th {
            color: #007A3F !important;
          }
        }
    `} /* Add "Team" text to the 3rd header (index 1) */
    thead tr th:nth-child(2) {
      &::before {
        content: 'Team';
      }
    }

    /* Align all headers center */
    thead tr th {
      text-align: center !important;
    }

    /* Align Position and Team headers to the left */
    thead tr th:first-child,
    thead tr th:nth-child(2) {
      text-align: left !important;
    }

    /* Align Form header to the right */
    thead tr th:last-child {
      text-align: right !important;
    }

    /* Align all table data center */
    tbody tr td {
      text-align: center !important;
    }

    /* Keep position and team left-aligned */
    tbody tr td:first-child,
    tbody tr td:nth-child(2),
    tbody tr td.Opta-Team {
      text-align: left !important;
    }

    /* Set team column width */
    tbody tr td:first-child,
    tbody tr td:nth-child(2),
    tbody tr td.Opta-Team {
      width: 1% !important;
      white-space: nowrap !important;
      min-width: 24px !important;
    }

    /* Align Form column to the right */
    tbody tr td:last-child {
      text-align: right !important;
    }

    /* Hide W, L, D, GF, GA, GD columns on small screens*/
    @media (max-width: ${breakpoints.medium}px) {
      /* Hide header columns by content */
      thead tr th:nth-child(6),
      thead tr th:nth-child(7),
      thead tr th:nth-child(8),
      thead tr th:nth-child(9),
      thead tr th:nth-child(10),
      thead tr th:nth-child(11) {
        display: none !important;
      }

      /* Hide corresponding body columns */
      tbody tr td:nth-child(6),
      tbody tr td:nth-child(7),
      tbody tr td:nth-child(8),
      tbody tr td:nth-child(9),
      tbody tr td:nth-child(10),
      tbody tr td:nth-child(11) {
        display: none !important;
      }
    }

    tr {
      td {
        font-weight: normal !important;
        background-color: transparent !important;
        border-bottom: 1px solid #e5f0ea !important;
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
               background-color: #007A3F;
               border-bottom: 1px solid #003418 !important;
               color: #FFFFFF !important;
            }
        `} &.Opta-Team, &.Opta-points {
          font-weight: bold !important;
        }
      }
      th {
        font-weight: normal !important;
        background-color: transparent !important;
        border-bottom: 1px solid #e5f0ea !important;
        color: #007a3f;
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
               color: #FFFFFF;
               border-bottom: 1px solid #003418 !important;
            }
        `};
      }
      &.Opta-highlight td,
      &.Opta-highlight th {
        background-color: #e5f0ea !important;
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
               background-color: rgba(255, 255, 255, 0.1) !important;
            }
        `};
      }
      /* Positions 1-6 - Team color */
      &:nth-child(-n + 6) th {
        color: #007a3f;
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
               color: #FFFFFF;
            }
        `};
      }

      /* Positions 7-17 - Black */
      &:nth-child(n + 7):nth-child(-n + 17) th {
        color: #000000;
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
               color: #FFFFFF;
            }
        `};
      }

      /* Positions 18-20 - Red */
      &:nth-child(n + 18):nth-child(-n + 20) th {
        color: #ff0000;
        ${props =>
          props.isApp &&
          `
            @media(prefers-color-scheme: dark) {
               color: #FFFFFF;
            }
        `};
      }

      /* Row 6 - dashed border bottom */
      &:nth-child(6) {
        position: relative;

        td,
        th {
          border-bottom: none !important;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 0;
          border-bottom: 2px dashed #007a3f;
        }
      }

      /* Row 5 - solid border bottom */
      &:nth-child(5) {
        position: relative;

        td,
        th {
          border-bottom: none !important;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 0;
          border-bottom: 2px solid #007a3f;
        }
      }

      /* Row 17 - solid border bottom */
      &:nth-child(17) {
        position: relative;

        td,
        th {
          border-bottom: none !important;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 0;
          border-bottom: 2px solid #ff0000;
        }
      }
    }
  }

  /* Position and Team column width */
  thead th:first-child,
  tbody td:first-child {
    width: 1% !important;
    white-space: nowrap !important;
  }

  thead th:nth-child(2),
  tbody td:nth-child(2) {
    width: 1% !important;
    white-space: nowrap !important;
  }

  /* Form column width */
  thead th:last-child,
  tbody td:last-child {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
  }

  /* Form indicators styling */
  .Opta-Record {
    display: flex !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: #e31b23 !important;
      }

      /* Force hide all child elements */
      span,
      .Opta-Hidden,
      h3,
      p,
      abbr,
      * {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
      }
    }
  }
`;