import React, { useState } from 'react';
import Input from 'components/input';
import Message from 'components/message';
import styled from 'styled-components';
import Icon from 'kwai-icon';
import copy from 'copy-text-to-clipboard';

const allSvgs = require.context('src/styles/icons/svg', false, /\.svg$/);

const iconData = allSvgs.keys().map((e: any) => e.substring(2).replace(/\.svg$/, ''));
export const Wrapper = styled.div`
    display: inline-flex;
    flex-direction: column;
    width: 90px;
    align-items: center;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    transition: all 0.2s ease-in-out;
    span {
        font-size: 10px;
    }
    svg {
        width: 24px;
        height: 24px;
        margin-bottom: 5px;
    }
    &:hover {
        background: #00a4aa;
        color: white;
        &&& svg path {
            fill: white;
        }
    }
`;
const Div = styled.div`
    border: 1px solid #dadcdf;
    border-radius: 2px;
    margin-top: 10px;
`;
type IProps = {
    name: string;
};
export const IconSearch = function(props: IProps) {
    return (
        <Wrapper
            onClick={() => {
                copy(`<Icon name="${props.name}"/>`);
                Message.success('代码已复制到剪贴板');
            }}
        >
            <Icon name={props.name} />
            <span>{props.name}</span>
        </Wrapper>
    );
};
export default function() {
    const [query, setQuery] = useState('');
    return (
        <div>
            <Input
                clear={true}
                width={300}
                placeholder="请输入要搜索的图标名称"
                value={query}
                onChange={(e: any) => setQuery(e.target.value)}
            />
            <Div>
                {iconData
                    .filter((i: any) => i.toLowerCase().includes(query.toLowerCase()))
                    .map((i: string) => {
                        return <IconSearch key={i} name={i} />;
                    })}
            </Div>
        </div>
    );
}