import { useMemo, useState } from 'react'
import { ICON_NAMES, Icon, Input, Space, type IconName } from '../../src'
import { Demo } from '../components/Demo'
import { Section } from '../components/Section'

export function Icons() {
  const [keyword, setKeyword] = useState('')
  const [copied, setCopied] = useState<IconName | null>(null)

  const visible = useMemo(() => {
    const query = keyword.trim().toLowerCase()
    return query === '' ? ICON_NAMES : ICON_NAMES.filter((name) => name.includes(query))
  }, [keyword])

  const copy = (name: IconName) => {
    const task = navigator.clipboard?.writeText(name)
    task?.catch(() => undefined)
    setCopied(name)
    window.setTimeout(() => setCopied((current) => (current === name ? null : current)), 1200)
  }

  return (
    <Section
      id="icons"
      title="图标"
      api="Icon"
      desc={`参考站 iconfont 的全量字形（${ICON_NAMES.length} 个，字体 52KB）。线性和填充成对出现，命名规则是「名字_风格」：search_line / search_fill、arrow_left_line / arrow_left_fill。点任意一格可以复制图标名。`}
    >
      <Demo
        title="全部字形"
        desc="按名字过滤（试试 arrow、fill、user），点击复制 `<Icon name=… />` 里的名字。"
        layout="column"
        code={`<Icon name="search_3_line" />
<Icon name="arrow_left_line" style={{ fontSize: 20 }} />`}
      >
        <Space gap="md" wrap>
          <Input
            icon="search_3_line"
            placeholder="过滤图标名，如 arrow / fill / user…"
            value={keyword}
            onChange={(event) => setKeyword(event.target.value)}
            clearable
            onClear={() => setKeyword('')}
            style={{ width: 300 }}
          />
          <span className="icon-count">
            {visible.length} / {ICON_NAMES.length}
          </span>
        </Space>

        <div className="icon-wall icon-wall--scroll">
          {visible.map((name) => (
            <button
              type="button"
              className="icon-cell"
              key={name}
              title={`复制 ${name}`}
              onClick={() => copy(name)}
            >
              <Icon name={name} />
              <code>{copied === name ? '已复制' : name}</code>
            </button>
          ))}
        </div>

        {visible.length === 0 && (
          <p className="icon-empty">没有匹配「{keyword.trim()}」的图标，换个关键词试试。</p>
        )}
      </Demo>
    </Section>
  )
}