/**
 * title: "图标列表"
 * description: "点击图标复制代码。"
 */
import React from 'react';
import { Icon, Grid, Message } from '@alicloud/console-components';
import CopyToClipboard from 'react-copy-to-clipboard';

const types = [
  'like-line1',
  'like-fill1',
  'downvote-line',
  'downvote-fill',
  'smile',
  'cry',
  'success',
  'warning',
  'prompt',
  'error',
  'help',
  'clock',
  'success-filling',
  'delete-filling',
  'favorites-filling',
  'add',
  'minus',
  'arrow-up',
  'arrow-down',
  'arrow-left',
  'arrow-right',
  'arrow-double-left',
  'arrow-double-right',
  'switch',
  'sorting',
  'descending',
  'ascending',
  'select',
  'semi-select',
  'loading',
  'search',
  'close',
  'ellipsis',
  'picture',
  'calendar',
  'ashbin',
  'upload',
  'download',
  'set',
  'edit',
  'refresh',
  'filter',
  'attachment',
  'account',
  'email',
  'atm',
];

const customTypes = [
  'star-solid',
  'cloud-machine',
  'display-code',
  'display-arrow-left',
  'account-add-solid',
  'paper-plane',
  'pause',
  'cog',
  'angle-double-up',
  'remove',
  'lock',
  'arrow-alt-left',
  'arrow-alt-right',
  'cart',
  'terminal',
  'points',
  'account-circle',
  'nail-fixed',
  'caret-left',
  'heart-regular',
  'lock-open',
  'arrow-alt-from-bottom',
  'training',
  'supervisor-account',
  'supervise',
  'scatter-plot',
  'share',
  'subtract',
  'search-minus',
  'chart-pie',
  'online',
  'arrows-alt',
  'ban',
  'new-releases',
  'menu',
  'location',
  'mail',
  'list-expansion',
  'chart-line',
  'list-collapsed',
  'installation-package',
  'heart-solid',
  'Keys',
  'question-circle',
  'expand-arrows-alt',
  'folder-add',
  'folder-open',
  'folder',
  'chart-bar',
  'stop',
  'shoppingcart',
  'service',
  'check',
  'scanning',
  'save',
  'sync-alt',
  'rights',
  'renewals',
  'release',
  'process',
  'rank',
  'print',
  'play',
  'position',
  'phone-untie',
  'phone',
  'phone-binding',
  'news',
  'nail',
  'management',
  'multiple-tips',
  'map',
  'more',
  'mains',
  'light',
  'layers',
  'filter-list',
  'angle-double-down',
  'search-plus',
  'arrow-to-bottom',
  'early-warning',
  'data',
  'collapse-card1',
  'collapse-card',
  'data-set',
  'invisible',
  'integral',
  'label',
  'import',
  'file-sql',
  'external-link-alt',
  'flag',
  'file',
  'file-add',
  'eye',
  'dollar',
  'export',
  'arrow-alt-from-top',
  'connection',
  'cut',
  'compass',
  'copy',
  'comment',
  'cloud-upload',
  'cell-phone',
  'cloud-download',
  'bug-report',
  'box',
  'calendar-alt',
  'arrow-to-top',
  'backspace',
  'angle-up',
  'angle-right',
  'caret-right',
  'caret-down',
  'caret-up',
  'angle-down',
  'annex',
  'angle-left',
  'all',
  'accesskeys',
  'icon-drag',
];

const IconStyle = {
  display: 'inline-block',
  width: '140px',
  padding: '30px 0',
  color: '#666',
  cursor: 'pointer',
  textAlign: 'center',
} as const;

const handleCopy = () => Message.success('Copied!');

export default () => (
  <div>
    <div className="icon-list-title">Base Icon</div>
    <Grid.Row className="icon-list" wrap>
      {types.map((type, index) => (
        <Grid.Col span="3" style={IconStyle}>
          <CopyToClipboard
            key={index}
            text={`<Icon type="${type}" />`}
            onCopy={handleCopy}
          >
            <div>
              <Icon type={type} size="xl" />
              <div>{type}</div>
            </div>
          </CopyToClipboard>
        </Grid.Col>
      ))}
    </Grid.Row>
    {customTypes.length ? (
      <div>
        <div className="icon-list-custom-title">Custom Icon</div>
        <Grid.Row className="icon-list" wrap>
          {customTypes.map((type, index) => (
            <Grid.Col span="3" style={IconStyle}>
              <CopyToClipboard
                key={index}
                text={`<Icon type="${type}" />`}
                onCopy={handleCopy}
              >
                <div>
                  <div><Icon type={type} size="xl" /></div>
                  <div>{type}</div>
                </div>
              </CopyToClipboard>
            </Grid.Col>
          ))}
        </Grid.Row>
      </div>
    ) : null}
  </div>
);