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

const sportBorder = '#c8dfd0';
const roboto = "'Roboto', sans-serif";
const darkBg = '#121212';
const darkGridBorder = '#2a3d30';
const darkCellBg = '#1e2e23';

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: ${darkBg};

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

        * {
          background-color: ${darkBg} !important;
          color: #ffffff !important;
        }
      }
    }
  `} .Opta .Opta_W {
    margin: 0;
    background-color: transparent;

    h2 {
      display: none;
    }

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

      .Opta-Flex {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid ${sportBorder};
        border-radius: 8px;
        overflow: hidden;
        background-color: ${sportBorder};
        gap: 1px;

        @media (min-width: ${breakpoints.medium}px) {
          grid-template-columns: repeat(6, 1fr);
        }

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

      .Opta-Flex-Item {
        border: none;
        text-align: center !important;
        padding: 14px 0 !important;
        background-color: ${colours.functional.white} !important;
        cursor: default;
        display: block !important;
        width: auto !important;
        float: none !important;

        ${props =>
          props.isApp &&
          `
          @media (prefers-color-scheme: dark) {
            background-color: ${darkCellBg} !important;
          }
        `} .Opta-Stat {
          width: 100%;
          text-align: center !important;

          .Opta-Value {
            color: ${colours.section.sport} !important;
            font-family: ${roboto} !important;
            font-weight: 500 !important;
            font-size: 24px !important;

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

          .Opta-Label {
            color: ${colours.functional.primary};
            font-family: ${roboto} !important;
            font-weight: 400 !important;
            font-size: 12px !important;
            margin-top: 10px;
            display: grid !important;
            place-items: center !important;

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

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

        .Opta-Hidden {
          display: none !important;
        }
      }

      .Opta-Overlayer,
      .Opta-Overlay {
        display: none !important;
      }
    }
  }
`;