import React from "react";
import flightTakeoff from "@cloudbees/honeyui-icons/svg/flight_takeoff.svg";
import announcement from "@cloudbees/honeyui-icons/svg/announcement.svg";
import doneAll from "@cloudbees/honeyui-icons/svg/done_all.svg";

// custom icons
import addNewObject from "@cloudbees/honeyui-icons/svg/add_new_object.svg";
import autoRefresh from "@cloudbees/honeyui-icons/svg/auto_refresh.svg";
import calendar from "@cloudbees/honeyui-icons/svg/calendar.svg";
import detailsArrow from "@cloudbees/honeyui-icons/svg/details_arrow.svg";
import devopsInsightDashboards from "@cloudbees/honeyui-icons/svg/devops_insight_dashboards.svg";
import dsl from "@cloudbees/honeyui-icons/svg/dsl.svg";
import duration from "@cloudbees/honeyui-icons/svg/duration.svg";
import editDashboardReleaseCommandCenter from "@cloudbees/honeyui-icons/svg/edit_dashboard_release_command_center.svg";
import emailNotification from "@cloudbees/honeyui-icons/svg/email_notification.svg";
import errorTriangle from "@cloudbees/honeyui-icons/svg/error_triangle.svg";
import expandRow from "@cloudbees/honeyui-icons/svg/expand_row.svg";
import Export from "@cloudbees/honeyui-icons/svg/export.svg";
import favoriteStar from "@cloudbees/honeyui-icons/svg/favorite_star.svg";
import favoriteUnselected from "@cloudbees/honeyui-icons/svg/favorite_unselected.svg";
import filterFunnel from "@cloudbees/honeyui-icons/svg/filter_funnel.svg";
import formatPaintbrush from "@cloudbees/honeyui-icons/svg/format_paintbrush.svg";
import helpTip from "@cloudbees/honeyui-icons/svg/help_tip.svg";
import Import from "@cloudbees/honeyui-icons/svg/import.svg";
import leaveSystem from "@cloudbees/honeyui-icons/svg/leave_system.svg";
import multiActionButton from "@cloudbees/honeyui-icons/svg/multi_action_button.svg";
import pipelineRuns from "@cloudbees/honeyui-icons/svg/pipeline_runs.svg";
import project from "@cloudbees/honeyui-icons/svg/project.svg";
import release from "@cloudbees/honeyui-icons/svg/release.svg";
import releaseCalendar from "@cloudbees/honeyui-icons/svg/release_calendar.svg";
import runDeployment from "@cloudbees/honeyui-icons/svg/run_deployment.svg";
import runningInProgress from "@cloudbees/honeyui-icons/svg/running_in_progress.svg";
import snapshot from "@cloudbees/honeyui-icons/svg/snapshot.svg";
import success from "@cloudbees/honeyui-icons/svg/success.svg";
import tag from "@cloudbees/honeyui-icons/svg/tag.svg";
import user from "@cloudbees/honeyui-icons/svg/user.svg";
import views from "@cloudbees/honeyui-icons/svg/views.svg";

const customIcons = [
  addNewObject,
  autoRefresh,
  calendar,
  detailsArrow,
  devopsInsightDashboards,
  dsl,
  duration,
  editDashboardReleaseCommandCenter,
  emailNotification,
  errorTriangle,
  expandRow,
  Export,
  favoriteStar,
  favoriteUnselected,
  filterFunnel,
  formatPaintbrush,
  helpTip,
  Import,
  leaveSystem,
  multiActionButton,
  pipelineRuns,
  project,
  release,
  releaseCalendar,
  runDeployment,
  runningInProgress,
  snapshot,
  success,
  tag,
  user,
  views
];

export default () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <p className="lead">
            Icons are used to quickly communicate a tool or function. They are small, undetailed
            abstractions of the greater entities they represent. Icons are not illustrations using
            multiple shades, tints, or hues and should not be used in larger visual projects like
            infographics.
          </p>
          <hr className="pb-3"></hr>
          <div className="row">
            <div className="col">
              <h2>Icons Material.io</h2>
              <p>
                We use material.io icons in our brand. While there are 5 icon themes (filled,
                outlined, rounded, two-tone, and sharp), we only use the filled style. A full list
                of what is available can be found{" "}
                <a href="https://material.io/resources/icons/?style=baseline">here.</a>
              </p>
              <p>
                Examples:
              </p>
              <p>
                An icon can be imported like this: <code>import flightTakeoff from "@cloudbees/honeyui-icons/svg/flight_takeoff.svg";</code>
              </p>
              <p>
                <svg width={32} viewBox={`${flightTakeoff.viewBox}`}>
                  <use xlinkHref={`#${flightTakeoff.id}`} />
                </svg>

                <svg width={32} viewBox={`${announcement.viewBox}`} className="ml-3">
                  <use xlinkHref={`#${announcement.id}`} />
                </svg>

                <svg width={32} viewBox={`${doneAll.viewBox}`} className="ml-3">
                  <use xlinkHref={`#${doneAll.id}`} />
                </svg>

                <span className="font-weight-bold ml-2">
                  &hellip;
                </span>
              </p>
              <h2 className="mt-5">Custom Icons</h2>
              <p>
                When matierial.io does not have what we need, we make custom icons to match the same
                style. These include general icons, product-specific icons, and company logo icons.
              </p>
              <p>
                {customIcons.map((icon) => (
                  <span className="d-inline-block mr-3 mb-2">
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
