import React, { createElement, ReactNode, useState } from 'react'
import { TextInput } from 'react-icecream'
import { Container, Column, Center, Row } from 'react-semantic-layout'
import chunk from 'lodash/chunk'

import * as icons from '.'

function IconRenderer({ icon, name }: { icon: ReactNode, name: string }) {
  return (
    <Container
      padding="8px"
      constraints={{ minWidth: '200px' }}
      style={{ border: '1px solid #eee' }}
    >
      <Column>
        <Container padding="24px 8px" style={{ fontSize: '32px' }}>
          <Center>{icon}</Center>
        </Container>
        <Container>
          <Center>{name}</Center>
        </Container>
      </Column>
    </Container>
  )
}

export default function Demo() {
  const deprecatedIcons = ['RefreshV2Icon']
  const [keyword, setKeyword] = useState('')

  return (
    <>
      <TextInput placeholder="搜索" onChange={setKeyword} />
      <br />
      <Container>
        <Column>
          {
            chunk(
              Object.keys(icons).filter(icon => (
                !deprecatedIcons.includes(icon)
                && icon.toLowerCase().includes(keyword.trim().toLowerCase())
              )), 4
            ).map((group, idx) => (
              <Row key={idx}>
                {
                  group.map((name, iconDix) => (
                    <IconRenderer key={iconDix} icon={createElement((icons as any)[name])} name={name} />
                  ))
                }
              </Row>
            ))
          }
        </Column>
      </Container>
    </>
  )
}