import React from 'react';
import { render, cleanup, fireEvent, screen } from '@testing-library/react';
import { generatePlaceholderString } from '../../../helpers/generators';
import '@testing-library/jest-dom/extend-expect';
import { getSingleContentData } from '~tests/factories/modules/content.factory';
import Content from '.';

describe('Content Component', () => {
  const page = {
    siteInfo: {
      site_name: 'My Site',
    },
    title: 'My Page',
    relation: {
      name: 'Page Relation',
    },
  };

  const module = {
    anchor_label: 'Anchor',
    name: 'Module Name',
    module_title: 'Module Title',
    value: '<h2>[YEAR]</h2>',
    style: 'default',
    show_more_content: '<p>More content</p>',
    show_more_enabled: '1',
  };

  test('render content props', () => {
    const correctData = getSingleContentData('h4');
    const { container } = render(<Content module={correctData} />);
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('div.content')).toHaveLength(1);

    // HTML parse
    expect(container.querySelectorAll('p')).toHaveLength(1);
    expect(container.querySelectorAll('i')).toHaveLength(1);

    // Lazy image
    // expect(container.querySelector('img')).toBeFalsy();
    // expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
  });

  test('Iframe props', () => {
    const iframeModule = {
      anchor_label: 'Slot tips',
      anchor_slug: 'slot-tips',
      anchored: 1,
      background_color: null,
      extra_anchors: null,
      module_title: 'Tips when Choosing Slot Machines',
      module_title_tag: 'h2',
      module_value_id: 208480,
      name: 'content',
      see_more_link: null,
      show_more_content: null,
      show_more_enabled: '0',
      show_more_label: null,
      style: 'content_frame_style',
      style_id: 41,
      tag: 'h2',
      title: 'Tips when Choosing Slot Machines',
      value: `
      <p>
        Whether youre a newcomer to the world of online gambling, or whether you are a seasoned player with a desire to keep abreast of whats happening in the industry, youll find all the information you need, right here on Playcasino.</p>
        <p>
          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--align-center fr-fic fr-dib">
        </p>
        <p>
          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--align-right fr-fic fr-dib">
        </p>
        <p>
          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--align-left fr-fic fr-dib">
        </p>
        <p>
          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--float-right fr-fic fr-dib">
        </p>
        <p>
          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--float-left fr-fic fr-dib">
        </p>
        <p>&nbsp;</p>
        <p>
          <strong>1. Top Lists:&nbsp;</strong>
            Our team loves putting together lists of all kinds, including 
        <a data-page-id="99259" href="/real-money-online-casinos">
          top real money casinos
        </a>
        , top casino bonuses,
         <a data-page-id="99338" href="/free-casinos-no-deposit-south-africa">
           top no deposit bonus casinos
         </a>
         , 
         <a data-page-id="99254" href="/live-dealer-casinos-south-africa">top live dealer casinos</a>
         , 
         <a data-page-id="99363" href="/sports-betting-listings">
          top sportsbooks,&nbsp;
         </a>
          <a data-page-id="98607" href="/low-wagering-casino-bonuses">
          top low wagering bonuses
          </a>
          etc.</p>
          <p>
            <strong>
            2. Casino and Sportsbook Reviews:&nbsp;
            </strong>
            Every casino and sportsbook we recommend is extensively reviewed by our professional team. We look at everything from games and bonuses available, to issues such as fairness, payouts, and security. Well provide unbiased and 
            <a href="/online-casino-reviews">
              objective reviews of the casinos
            </a>
              and sportsbooks listings, to help you make an educated decision before betting your bankroll at the site of any online or 
            <a data-page-id="99146" href="/land-based-casino-listings">land based casino
            </a>
            .</p><p><strong>3. Game Reviews:</strong> New games are released to the South African casino landscape every month. Youll find reviews of all these new games, as well as all the popular classics. Learn about the important features of<a data-page-id="98606" href="/slots">&nbsp;new slots
            </a>, real money slots, and table games, such as betting limits, themes, bonus features, free play and 
            <a data-page-id="99186" href="/progressive-jackpots">
              progressive jackpots
            </a>.
            Discover exciting and rewarding new titles to spice up your gaming sessions.
          </p>
          <p>
            <strong>4. Reviews on Software Providers:
            </strong> The companies that provide fantastic games at the best SA online casinos are reviewed on this site. Well examine which providers are better than others and let you know why.&nbsp; Well list the games that make up their portfolio and tell you where you can find their titles.
          </p>
          <p>
            <strong>
            5. Reviews on Payment Methods:
            </strong> Payment methods form the backbone for the secure transfer of funds into and from your
            <a data-page-id="99253" href="/zar-online-casinos-south-africa">
            &nbsp;ZAR-friendly casino accounts
            </a> which is why we only recommend trusted and proven banking methods that are safe, easy and convenient for South Africans to use.
            </p> <p>
            <iframe width="960" height="560" src="https://www.youtube.com/embed/zdzQcsduee8" title="YouTube video player" frameborder="0" allowfullscreen="0">
            </iframe>
          </p>
          <p>
            <strong>
              6. Guides:&nbsp;
            </strong> 
            From 
            <a data-page-id="99185" href="/online-casino-gambling">
              beginner guides and how-to-play guides
            </a>
              to more intermediate and advanced strategies and tips, we cover everything players need to know whether they are new or experienced.
          </p>
          <p>
            <strong>
              7. News:&nbsp;
            </strong>
            We are firm believers that to truly succeed in online gambling, you need to keep abreast of the
            <a href="/blog">
              &nbsp;latest news
            </a>
              and be informed about industry updates. We are proud of our regularly updated news page that tells you about the latest promotions and reports on industry-related developments, both in South Africa and in the greater global industry. Dont miss out on the informative content on everything you wish to know, including much needed data &amp; math to check 
            <a data-page-id="98584" href="/blog/chances-you-win-south-african-lottery">
              how likely you are to win the lottery
            </a>
            ?
          </p>
            <p>
              <iframe width="960" height="560" src="https://www.youtube.com/embed/zdzQcsduee8" title="YouTube video player" frameborder="0" allowfullscreen="0">
              </iframe>
            </p>
      `,
    };
    const { container } = render(<Content module={iframeModule} />);

    expect(container.querySelectorAll('iframe')).toBeTruthy();
  });

  test('test Show more content', () => {
    const iframeModule = {
      anchor_label: 'Slot tips',
      anchor_slug: 'slot-tips',
      anchored: 1,
      background_color: null,
      extra_anchors: null,
      module_title: 'Tips when Choosing Slot Machines',
      module_title_tag: 'h2',
      module_value_id: 208480,
      name: 'content',
      see_more_link: null,
      show_more_content: `
        <p>More COntent test</p>
      `,
      show_more_enabled: '1',
      show_more_label: 'show more test',
      style: 'content_frame_style',
      style_id: 41,
      tag: 'h2',
      title: 'Tips when Choosing Slot Machines',
      value: `
      <p>
         <p>
            <strong>
            5. Reviews on Payment Methods:
            </strong> Payment methods form the backbone for the secure transfer of funds into and from your
            <a data-page-id="99253" href="/zar-online-casinos-south-africa">
            &nbsp;ZAR-friendly casino accounts
            </a> which is why we only recommend trusted and proven banking methods that are safe, easy and convenient for South Africans to use.
            </p>
          </p>
          <p>
            <strong>
              6. Guides:&nbsp;
            </strong> 
            From 
            <a data-page-id="99185" href="/online-casino-gambling">
              beginner guides and how-to-play guides
            </a>
              to more intermediate and advanced strategies and tips, we cover everything players need to know whether they are new or experienced.
          </p>
          
      `,
    };
    const { container, getByText } = render(<Content module={iframeModule} />);
    expect(getByText('show more test')).toBeTruthy();

    const showMorebutton = container.querySelector('button');
    fireEvent.click(showMorebutton);

    expect(getByText('More COntent test')).toBeTruthy();
  });

  test('renders content with placeholder string for h2', () => {
    const { container } = render(<Content module={module} page={page} />);
    expect(container.querySelector('h2')).toHaveTextContent('2023');
  });

  test('renders content without placeholder string for h2', () => {
    module.value = '<h2></h2>';
    const { container } = render(<Content module={module} page={page} />);
    expect(container.querySelector('h2')).toHaveTextContent('');
  });
});
afterEach(() => {
  cleanup();
});
