import { message } from 'ant-design-vue'
import CopyableIcon from './CopyableIcon'

const Category = {
  props: ['icons', 'title', 'newIcons', 'theme'],
  data () {
    return {
      justCopied: null,
    }
  },
  methods: {
    onCopied (type, text) {
      message.success(<span><code class='copied-code'>{text}</code> copied 🎉</span>)
      this.justCopied = type
      setTimeout(() => {
        this.justCopied = null
      }, 2000)
    },
  },
  render () {
    const {
      icons, title,
      theme, newIcons,
    } = this.$props
    const items = icons.map((name) => {
      return (
        <CopyableIcon
          key={name}
          type={name}
          theme={theme}
          isNew={newIcons.indexOf(name) >= 0}
          justCopied={this.justCopied}
          onCopied={this.onCopied}
        />
      )
    })
    const message = this.$t('message')
    return (
      <div>
        <h3>{message[`app.docs.components.icon.category.${title}`]}</h3>
        <ul class={'anticons-list'}>
          {items}
        </ul>
      </div>
    )
  },
}

export default Category