import React from "react";
import { CustomIcons } from "./custom-icons/custom-icons";

// icons
import add from "@cloudbees/honeyui-icons/svg/add.svg";
import addCircle from "@cloudbees/honeyui-icons/svg/add_circle.svg";
import addFolder from "@cloudbees/honeyui-icons/svg/create_new_folder.svg";
import arrowCircleUp from "@cloudbees/honeyui-icons/svg/arrow_circle_up.svg";
import arrowCircleDown from "@cloudbees/honeyui-icons/svg/arrow_circle_down.svg";
import alarm from "@cloudbees/honeyui-icons/svg/access_alarm.svg";
import arrowDown from "@cloudbees/honeyui-icons/svg/keyboard_arrow_down.svg";
import arrowLeft from "@cloudbees/honeyui-icons/svg/keyboard_arrow_left.svg";
import arrowNorth from "@cloudbees/honeyui-icons/svg/arrow_north.svg";
import arrowRight from "@cloudbees/honeyui-icons/svg/keyboard_arrow_right.svg";
import arrowSouth from "@cloudbees/honeyui-icons/svg/arrow_south.svg";
import arrowUp from "@cloudbees/honeyui-icons/svg/keyboard_arrow_up.svg";
import attachment from "@cloudbees/honeyui-icons/svg/attachment.svg";
import calendar from "@cloudbees/honeyui-icons/svg/calendar.svg";
import check from "@cloudbees/honeyui-icons/svg/check.svg";
import close from "@cloudbees/honeyui-icons/svg/close.svg";
import cloud from "@cloudbees/honeyui-icons/svg/cloud.svg";
import cloudDone from "@cloudbees/honeyui-icons/svg/cloud_done.svg";
import cloudDownload from "@cloudbees/honeyui-icons/svg/cloud_download.svg";
import cloudUpload from "@cloudbees/honeyui-icons/svg/cloud_upload.svg";
import code from "@cloudbees/honeyui-icons/svg/code.svg";
import collapseRow from "@cloudbees/honeyui-icons/svg/unfold_less.svg";
import comment from "@cloudbees/honeyui-icons/svg/mode_comment.svg";
import computer from "@cloudbees/honeyui-icons/svg/computer.svg";
import dashboard from "@cloudbees/honeyui-icons/svg/dashboard.svg";
import dotMenu from "@cloudbees/honeyui-icons/svg/more_vert.svg";
import download from "@cloudbees/honeyui-icons/svg/file_download.svg";
import dragIndicator from "@cloudbees/honeyui-icons/svg/drag_indicator.svg";
import edit from "@cloudbees/honeyui-icons/svg/edit.svg";
import expandRow from "@cloudbees/honeyui-icons/svg/unfold_more.svg";
import error from "@cloudbees/honeyui-icons/svg/error_triangle.svg";
import failed from "@cloudbees/honeyui-icons/svg/cancel.svg";
import hourglassBottom from "@cloudbees/honeyui-icons/svg/hourglass_bottom.svg";
import favoriteStar from "@cloudbees/honeyui-icons/svg/star.svg";
import favoriteUnselected from "@cloudbees/honeyui-icons/svg/star_border.svg";
import file from "@cloudbees/honeyui-icons/svg/insert_drive_file.svg";
import filterFunnel from "@cloudbees/honeyui-icons/svg/filter_funnel.svg";
import flag from "@cloudbees/honeyui-icons/svg/flag.svg";
import folder from "@cloudbees/honeyui-icons/svg/folder.svg";
import games from "@cloudbees/honeyui-icons/svg/games.svg";
import grid from "@cloudbees/honeyui-icons/svg/apps.svg";
import group from "@cloudbees/honeyui-icons/svg/group.svg";
import groupAdd from "@cloudbees/honeyui-icons/svg/group_add.svg";
import helpTip from "@cloudbees/honeyui-icons/svg/help_tip.svg";
import home from "@cloudbees/honeyui-icons/svg/home.svg";
import info from "@cloudbees/honeyui-icons/svg/info.svg";
import insertPhoto from "@cloudbees/honeyui-icons/svg/insert_photo.svg";
import layers from "@cloudbees/honeyui-icons/svg/layers.svg";
import leaveSystem from "@cloudbees/honeyui-icons/svg/leave_system.svg";
import location from "@cloudbees/honeyui-icons/svg/location_on.svg";
import lock from "@cloudbees/honeyui-icons/svg/lock.svg";
import lockOpen from "@cloudbees/honeyui-icons/svg/lock_open.svg";
import mail from "@cloudbees/honeyui-icons/svg/mail.svg";
import lineMenu from "@cloudbees/honeyui-icons/svg/menu.svg";
import mobilePhone from "@cloudbees/honeyui-icons/svg/stay_current_portrait.svg";
import notificationsOff from "@cloudbees/honeyui-icons/svg/notifications_off.svg";
import notificationsOn from "@cloudbees/honeyui-icons/svg/notifications.svg";
import notificationImportant from "@cloudbees/honeyui-icons/svg/notification_important.svg";
import phone from "@cloudbees/honeyui-icons/svg/local_phone.svg";
import photoCamera from "@cloudbees/honeyui-icons/svg/photo_camera.svg";
import project from "@cloudbees/honeyui-icons/svg/work.svg";
import redo from "@cloudbees/honeyui-icons/svg/redo.svg";
import refresh from "@cloudbees/honeyui-icons/svg/refresh.svg";
import remove from "@cloudbees/honeyui-icons/svg/remove.svg";
import removeCircle from "@cloudbees/honeyui-icons/svg/remove_circle.svg";
import runDeployment from "@cloudbees/honeyui-icons/svg/run_deployment.svg";
import search from "@cloudbees/honeyui-icons/svg/search.svg";
import settings from "@cloudbees/honeyui-icons/svg/settings.svg";
import success from "@cloudbees/honeyui-icons/svg/check_circle.svg";
import sync from "@cloudbees/honeyui-icons/svg/auto_refresh.svg";
import syncDisabled from "@cloudbees/honeyui-icons/svg/sync_disabled.svg";
import syncProblem from "@cloudbees/honeyui-icons/svg/sync_problem.svg";
import tag from "@cloudbees/honeyui-icons/svg/tag.svg";
import thumbUp from "@cloudbees/honeyui-icons/svg/thumb_up.svg";
import thumbDown from "@cloudbees/honeyui-icons/svg/thumb_down.svg";
import trendingUp from "@cloudbees/honeyui-icons/svg/trending_up.svg";
import trendingDown from "@cloudbees/honeyui-icons/svg/trending_down.svg";
import timer from "@cloudbees/honeyui-icons/svg/timer.svg";
import trash from "@cloudbees/honeyui-icons/svg/delete.svg";
import undo from "@cloudbees/honeyui-icons/svg/undo.svg";
import upload from "@cloudbees/honeyui-icons/svg/file_upload.svg";
import user from "@cloudbees/honeyui-icons/svg/user.svg";
import userCircle from "@cloudbees/honeyui-icons/svg/account_circle.svg";
import personAdd from "@cloudbees/honeyui-icons/svg/person_add.svg";
import personRemove from "@cloudbees/honeyui-icons/svg/person_remove.svg";
import views from "@cloudbees/honeyui-icons/svg/views.svg";
import warning from "@cloudbees/honeyui-icons/svg/error.svg";
import menuToggle from "@cloudbees/honeyui-icons/svg/menu_toggle.svg";

const actions = [
  add,
  addCircle,
  arrowCircleUp,
  arrowCircleDown,
  remove,
  removeCircle,
  refresh,
  sync,
  syncDisabled,
  syncProblem,
  check,
  close,
  cloud,
  cloudDone,
  cloudDownload,
  cloudUpload,
  download,
  dragIndicator,
  upload,
  edit,
  expandRow,
  collapseRow,
  favoriteStar,
  favoriteUnselected,
  filterFunnel,
  flag,
  folder,
  addFolder,
  file,
  games,
  helpTip,
  insertPhoto,
  photoCamera,
  leaveSystem,
  lock,
  lockOpen,
  runDeployment,
  search,
  settings,
  trash,
  views
];

const alerts = [
  success,
  warning,
  error,
  failed,
  info,
  notificationsOn,
  notificationsOff,
  notificationImportant,
  hourglassBottom
];

const communication = [mail, attachment, phone, location, comment];

const hardware = [computer, mobilePhone];

const menu = [
  {
    icon: grid,
    name: "apps.svg"
  },
  {
    icon: lineMenu,
    name: "menu.svg"
  },
  {
    icon: menuToggle,
    name: "menu_toggle.svg",
    usage: `This icon is used to toggle / untoggle a side navigation component.
      The arrow should point to the direction of the toggle action.
      Use 180 CSS transform to rotate the icon in the right direction.`
  },
  {
    icon: dotMenu,
    name: "dot_vert.svg"
  },
  {
    icon: dashboard,
    name: "dashboard.svg"
  }
];

const misc = [
  alarm,
  arrowNorth,
  arrowSouth,
  timer,
  calendar,
  code,
  layers,
  project,
  tag,
  thumbUp,
  thumbDown,
  trendingUp,
  trendingDown
];

const navigation = [home, arrowDown, arrowUp, arrowLeft, arrowRight, undo, redo];

const people = [userCircle, user, personAdd, personRemove, group, groupAdd];

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-5"></hr>
          <div className="row">
            <div className="col">
              <h2>Icons Material.io</h2>
              <p>
                We curate our custom set of icons that are directly lifted from material.io icons in
                our brand. While there are 5 icon themes (filled, outlined, rounded, two-tone, and
                sharp), we primarily 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>
                An icon can be imported like this:{" "}
                <code>import home from "@cloudbees/honeyui-icons/svg/home.svg";</code>
              </p>
              <p>
                <svg width={32} viewBox={`${home.viewBox}`}>
                  <use xlinkHref={`#${home.id}`} />
                </svg>
              </p>

              <h2 className="mt-5">Material Based Icons</h2>
              <p>
                These icons have been curated directly from matarial.io. If you need an icon that is
                not listed below, simply download the needed icon from material.io and contribute to
                the HUI codebase for eveyone to enjoy!
              </p>

              <h4 className="pt-1">Actions</h4>
              <hr />

              <p className="pb-5">
                {actions.map((icon, index) => (
                  <span className="d-inline-block m-3" key={index}>
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>

              <h4 className="pt-1">Alerts</h4>
              <hr />
              <p className="pb-5">
                {alerts.map((icon, index) => (
                  <span className="d-inline-block m-3" key={index}>
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>

              <h4 className="pb-3">Communication</h4>
              <hr />
              <p className="pb-5">
                {communication.map((icon, index) => (
                  <span className="d-inline-block m-3" key={index}>
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>

              <h4 className="pb-3">Hardware</h4>
              <hr />
              <p className="pb-5">
                {hardware.map((icon, index) => (
                  <span className="d-inline-block m-3" key={index}>
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>

              <h4 className="pb-3">Menu</h4>
              <hr />

              <p className="pb-5">
                <table className="table">
                  <thead>
                    <tr>
                      <th>Icon</th>
                      <th>Name</th>
                      <th>Usage</th>
                    </tr>
                  </thead>
                  <tbody>
                    {menu.map((item, index) => (
                      <tr key={index}>
                        <td>
                          <span className="d-inline-block m-3" key={index}>
                            <svg width={32} viewBox={`${item.icon.viewBox}`}>
                              <use xlinkHref={`#${item.icon.id}`} />
                            </svg>
                          </span>
                        </td>
                        <td>
                          <span className="d-inline-block m-3">{item.name}</span>
                        </td>
                        <td>
                          <span className="d-inline-block m-3">{item?.usage}</span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </p>

              <h4 className="pb-3">Misc</h4>
              <hr />
              <p className="pb-5">
                {misc.map((icon, index) => (
                  <span className="d-inline-block m-3" key={index}>
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>

              <h4 className="pb-3">Navigation</h4>
              <hr />
              <p className="pb-5">
                {navigation.map((icon, index) => (
                  <span className="d-inline-block m-3" key={index}>
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>

              <h4 className="pb-3">People</h4>
              <hr />
              <p className="pb-5">
                {people.map((icon, index) => (
                  <span className="d-inline-block m-3" key={index}>
                    <svg width={32} viewBox={`${icon.viewBox}`}>
                      <use xlinkHref={`#${icon.id}`} />
                    </svg>
                  </span>
                ))}
              </p>

              <h4 className="pb-3">Custom Icons</h4>
              <hr />
              <p>These icons have been customized or recreated to match our icon set.</p>
              <CustomIcons />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
