import { Meta, IconGallery, IconItem } from '@storybook/addon-docs'
import { Icon } from '../src/Icon'

export const PHOSPHER_ICONS = [
  'Activity',
  'Archive',
  'ArchiveTray',
  'ArrowLeft',
  'ArrowRight',
  'Buildings',
  'Circle',
  'CaretDown',
  'CaretLeft',
  'CaretRight',
  'ChartBar',
  'ChartLine',
  'ChatCircle',
  'CheckSquare',
  'Compass',
  'Check',
  'Copy',
  'Database',
  'DotsThreeVertical',
  'DownloadSimple',
  'ArrowCounterClockwise',
  'MagnifyingGlassMinus',
  'MagnifyingGlassPlus',
  'Export',
  'Eye',
  'EyeSlash',
  'Envelope',
  'Gear',
  'GitBranch',
  'IdentificationCard',
  'List',
  'ListBullets',
  'Lock',
  'MagnifyingGlass',
  'MapPin',
  'Medal',
  'NotePencil',
  'Paperclip',
  'PaperPlaneTilt',
  'Pen',
  'Pencil',
  'PencilSimpleLine',
  'Phone',
  'Plus',
  'Printer',
  'SignOut',
  'Star',
  'Target',
  'TextT',
  'Trash',
  'UploadSimple',
  'User',
  'UserPlus',
  'Users',
  'WarningCircle',
  'X',
  'CircleWavyCheck',
  'CircleWavyQuestion'
]

<Meta title="Styles/Iconography" />

export function AllIcons({ icons: allIcons }) {
  return allIcons.map((iconName) => (
    <IconItem name={iconName} key={iconName}>
      <Icon name={iconName} />
    </IconItem>
  ))
}

export const ExternalLinkIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="14"
    height="14"
    viewBox="0 0 24 24"
    fill="none"
    stroke="#4972BB"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="feather feather-external-link"
  >
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
    <polyline points="15 3 21 3 21 9"></polyline>
    <line x1="10" y1="14" x2="21" y2="3"></line>
  </svg>
)

# Iconography

OpenCRVS UI-Kit is uses the open source <a href="https://phosphoricons.com/" target="_blank">Phosphor icons <ExternalLinkIcon /></a> with additional custom icons. See [Icon](/docs/data-icon--default) story page for more information about the usage of the component.

## Record status icons

<br />
<IconGallery>
  <AllIcons
    icons={[
      'Archived',
      'Certified',
      'Draft',
      'DuplicateYellow',
      'ExternalValidate',
      'InReview',
      'Registered',
      'RequiresUpdates',
      'Validated',
      'WaitingApproval'
    ]}
  />
</IconGallery>

## Icons

<br />
<IconGallery>
  <AllIcons icons={PHOSPHER_ICONS} />
  <AllIcons
    icons={[
      'Assigned',
      'FilledCheck',
      'Sent',
      'Offline',
      'Close',
      'Collapse',
      'Expand'
    ]}
  />
</IconGallery>