import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import 'jest-styled-components';
import { LoadingWrapper, WidgetContainer } from '../WidgetContainer';

describe('OptaMatchSummary WidgetContainer styles', () => {
  it('scopes the placeholder overlay to the widget container', () => {
    const { container } = render(<LoadingWrapper />);
    const loadingWrapper = container.firstChild;

    expect(loadingWrapper).toHaveStyleRule('position', 'relative');
    expect(loadingWrapper).toHaveStyleRule('min-height', '157px');
  });

  it('renders default styles and header layout', () => {
    const { container } = render(
      <WidgetContainer isApp={false}>
        <div className="Opta">
          <div className="Opta_W" />
        </div>
        <table className="Opta-MatchHeader">
          <tbody>
            <tr>
              <td className="Opta-Team Opta-Home">Home</td>
              <td className="Opta-Score Opta-Home">
                <span>
                  <span className="Opta-Team-Score">1</span>
                </span>
              </td>
              <td className="Opta-Score Opta-Away">
                <span>
                  <span className="Opta-Team-Score">2</span>
                </span>
              </td>
              <td className="Opta-Team Opta-Away">Away</td>
              <td className="Opta-Divider Opta-Dash">-</td>
            </tr>
            <tr className="Opta-Score-Extras">
              <td>
                <span className="Opta-Date">Fri 1 Dec</span>
              </td>
            </tr>
            <tr>
              <td>
                <div>
                  <span className="Opta-MatchHeader-Venue">
                    <span className="Opta-MatchHeader-VenueLabel">Venue</span>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div className="Opta-Matchdata" />
        <div className="Opta-Cf">
          <ul className="Opta-Events Opta-Home">
            <li>
              <span className="Opta-Event-Text Opta-Home">
                <span className="Opta-Event-Player">Player</span>
              </span>
              <span className="Opta-Event-Time">45'</span>
              <span className="Opta-Icon" />
            </li>
          </ul>
        </div>
      </WidgetContainer>
    );

    expect(container.querySelector('.Opta_W')).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-MatchHeader tbody')
    ).toBeInTheDocument();
    expect(container.querySelector('.Opta-Date')).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-MatchHeader-VenueLabel')
    ).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-Events.Opta-Home')
    ).toBeInTheDocument();
    expect(container.querySelector('.Opta-Event-Time')).toBeInTheDocument();
  });

  it('renders app styles and away events layout', () => {
    const { container } = render(
      <WidgetContainer isApp={true}>
        <table className="Opta-MatchHeader">
          <tbody>
            <tr className="Opta-Score-Extras">
              <td>
                <abbr className="Opta-Date">Sat 2 Dec</abbr>
              </td>
            </tr>
            <tr>
              <td>
                <div>
                  <span className="Opta-Competition">League</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div className="Opta-Cf">
          <ul className="Opta-Events Opta-Away">
            <li>
              <span className="Opta-Event-Text Opta-Away">
                <span className="Opta-Event-Player">Player</span>
              </span>
              <span className="Opta-Event-Time">12'</span>
              <span className="Opta-Icon" />
            </li>
          </ul>
        </div>
      </WidgetContainer>
    );

    expect(container.querySelector('.Opta-Competition')).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-Events.Opta-Away')
    ).toBeInTheDocument();
    expect(container.querySelector('.Opta-Event-Time')).toBeInTheDocument();
  });
});