import React, { Component } from 'react'
import { Card, Drawer, Tabs } from 'antd'
import { AntIcon } from 'components'
import icons from './icons'

export default class IconSelector extends Component {

    state = {
        visible: false,
        activeKey: icons[0].key,
        selected: ''
    }

    open = (icon) => {
        if (icon) {
            const activeKey = (icons.find(p => p.icons.includes(icon)) || icons[0]).key
            this.setState({
                visible: true,
                activeKey,
                selected: icon
            })
        } else {
            this.setState({ visible: true })
        }
    }

    close = () => {
        this.setState({ visible: false })
    }

    onSelectIcon = (icon) => {
        if (this.props.onSelect) {
            this.props.onSelect(icon)
        }
        this.close()
    }

    render() {

        const { visible, activeKey, selected } = this.state

        return (
            <Drawer
                visible={visible}
                className="yo-icon-selector"
                title="选择图标"
                width={600}
                destroyOnClose
                onClose={() => this.close()}
            >
                <Tabs
                    tabPosition="left"
                    activeKey={activeKey}
                    onChange={(activeKey) => this.setState({ activeKey })}
                >
                    {
                        icons.map(iconGroup => {
                            return (
                                <Tabs.TabPane
                                    key={iconGroup.key}
                                    tab={iconGroup.title}
                                >
                                    <Card>
                                        {
                                            iconGroup.icons.map(icon => {
                                                return (
                                                    <Card.Grid
                                                        key={icon}
                                                        className={selected === icon ? 'yo-icon--selected' : ''}
                                                        onClick={() => this.onSelectIcon(icon)}
                                                    >
                                                        <AntIcon type={icon} style={{ fontSize: '36px' }} />
                                                        <span>{icon}</span>
                                                    </Card.Grid>
                                                )
                                            })
                                        }
                                    </Card>
                                </Tabs.TabPane>
                            )
                        })
                    }
                </Tabs>
            </Drawer>
        )
    }
}
