import React from "react";
import ReactDOM from "react-dom";
import Header from "../components/Header/Header.jsx";
import ArticleList from "../components/ArticleList/ArticleList.jsx";
import Button from "../components/Button/Button.jsx";
import PopularTopics from "../components/PopularTopics/PopularTopics.jsx";
import TagPicker from "../components/TagPicker/TagPicker.jsx";

var StyleGuideOverlay = function () {};

StyleGuideOverlay.prototype = {
  create() {
    // TODO: Wrap popular topics component in JSX to work without needing an explicit container hierarchy for styling
    ReactDOM.render(
      <div>
        <h3>JSX Components:</h3>
        <h4 className="stp_styleguide_h4">Buttons</h4>
        <h5 className="stp_styleguide_h5">text</h5>
        <Button style="text" url="https://example.org" source="styleguide">
          Text Button
        </Button>
        <h5 className="stp_styleguide_h5">primary</h5>
        <Button style="primary" url="https://example.org" source="styleguide">
          Primary Button
        </Button>
        <h5 className="stp_styleguide_h5">secondary</h5>
        <Button style="secondary" url="https://example.org" source="styleguide">
          Secondary Button
        </Button>
        <h5 className="stp_styleguide_h5">primary wide</h5>
        <span className="stp_button_wide">
          <Button style="primary" url="https://example.org" source="styleguide">
            Primary Wide Button
          </Button>
        </span>
        <h5 className="stp_styleguide_h5">secondary wide</h5>
        <span className="stp_button_wide">
          <Button
            style="secondary"
            url="https://example.org"
            source="styleguide"
          >
            Secondary Wide Button
          </Button>
        </span>
        <h4 className="stp_styleguide_h4">Header</h4>
        <Header>
          <Button style="primary" url="https://example.org" source="styleguide">
            View My List
          </Button>
        </Header>
        <h4 className="stp_styleguide_h4">PopularTopics</h4>
        <PopularTopics
          pockethost={`getpocket.com`}
          source={`styleguide`}
          utmParams={`utm_source=styleguide`}
          topics={[
            { title: "Self Improvement", topic: "self-improvement" },
            { title: "Food", topic: "food" },
            { title: "Entertainment", topic: "entertainment" },
            { title: "Science", topic: "science" },
          ]}
        />
        <h4 className="stp_styleguide_h4">ArticleList</h4>
        <ArticleList
          source={`styleguide`}
          articles={[
            {
              title: "Article Title",
              publisher: "Publisher",
              thumbnail:
                "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
              url: "https://example.org",
              alt: "Alt Text",
            },
            {
              title: "Article Title (No Publisher)",
              thumbnail:
                "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg",
              url: "https://example.org",
              alt: "Alt Text",
            },
            {
              title: "Article Title (No Thumbnail)",
              publisher: "Publisher",
              url: "https://example.org",
              alt: "Alt Text",
            },
          ]}
        />
        <h4 className="stp_styleguide_h4">TagPicker</h4>
        <TagPicker tags={[`futurism`, `politics`, `mozilla`]} />
        <h3>Typography:</h3>
        <h2 className="header_large">.header_large</h2>
        <h3 className="header_medium">.header_medium</h3>
        <p>paragraph</p>
        <h3>Native Elements:</h3>
        <h4 className="stp_styleguide_h4">Horizontal Rule</h4>
        <hr />
      </div>,
      document.querySelector(`#stp_style_guide_components`)
    );
  },
};

export default StyleGuideOverlay;