import './demo1.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Search from '..';
import { ConfigProvider, Menu, Radio } from '../..';
function onSearch(v) {
    console.log(v);
}
const dataSource = [
    {
        label: 'Recent label',
        value: 'Recent',
    },
    {
        label: 'dress label',
        value: 'dress',
    },
    {
        label: 'sunglasses label',
        value: 'sunglasses',
    },
    {
        label: 't-shirt label',
        value: 't-shirt',
    },
];
const sizeList = [{
        value: 'large',
        label: 'large',
    }, {
        value: 'medium',
        label: 'medium',
    }, {
        value: 'small',
        label: 'small',
    }, {
        value: 'xs',
        label: 'xs',
    }];
const typeList = [{
        value: 'normal',
        label: 'normal',
    }, {
        value: 'brand',
        label: 'brand',
    }, {
        value: 'dark',
        label: 'dark',
    }];
const disabledList = [{
        value: true,
        label: 'true',
    }, {
        value: false,
        label: 'false',
    }];
const themeList = [{
        value: 'white',
        label: 'white',
    }, {
        value: 'grey',
        label: 'grey',
    }];
const menuData = [
    {
        label: 'Products',
        value: 'Products',
    },
    {
        label: 'Products1',
        value: 'Products1',
    },
    {
        label: 'Products2',
        value: 'Products2',
    },
    {
        label: 'Products3',
        value: 'Products3',
    },
    {
        label: 'Products4',
        value: 'Products4',
    },
    {
        label: 'Products5',
        value: 'Products5',
    },
    {
        label: 'Products6',
        value: 'Products6',
    },
    {
        label: 'Products7',
        value: 'Products7',
    },
    {
        label: 'Products8',
        value: 'Products8',
    },
    {
        label: 'Products9',
        value: 'Products9',
    },
    {
        label: 'Products10',
        value: 'Products10',
    },
    {
        label: 'Suppliers1111111111',
        value: 'Suppliers1111111111',
    },
];
class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSize = size => {
            this.setState({ size });
        };
        this.handleDisabled = disabled => {
            this.setState({ disabled });
        };
        this.handleTheme = theme => {
            this.setState({ theme });
        };
        this.handleType = type => {
            this.setState({ type });
        };
        this.onSearch = (value, filterValue) => {
            console.log(value, filterValue);
        };
        this.onChange = value => {
            this.setState({
                value,
            });
        };
        this.state = {
            size: 'large',
            menuData,
            value: '',
            disabled: false,
            theme: 'white',
            type: 'normal',
        };
    }
    // value is filter value，obj is the search value
    onFilterChange(value) {
        console.log(value);
    }
    renderMenu() {
        const menuData = this.state.menuData;
        return (React.createElement(Menu, { onSelect: this.onFilterChange.bind(this), rtl: true, className: "diy-menu", selectMode: "single" },
            React.createElement(Menu.Group, { label: "Recent", key: "xxx" }, menuData.map(item => {
                return (React.createElement(Menu.Item, { key: item.value }, item.label));
            }))));
    }
    render() {
        const { size, disabled, theme, type } = this.state;
        return (React.createElement(ConfigProvider, { theme: theme },
            React.createElement("div", null,
                React.createElement("span", { className: "demo-label" }, "Select Size\uFF1A"),
                React.createElement(Radio.Group, { defaultValue: "medium", dataSource: sizeList, value: this.state.size, onChange: this.handleSize }),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement("span", { className: "demo-label" }, "Select Disabled\uFF1A"),
                React.createElement(Radio.Group, { defaultValue: false, 
                    // @ts-ignore
                    dataSource: disabledList, value: this.state.disabled, onChange: this.handleDisabled }),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement("span", { className: "demo-label" }, "Select Theme\uFF1A"),
                React.createElement(Radio.Group, { defaultValue: "white", 
                    // @ts-ignore
                    dataSource: themeList, value: this.state.theme, onChange: this.handleTheme }),
                React.createElement("br", null),
                React.createElement("br", null),
                React.createElement("span", { className: "demo-label" }, "Select Type\uFF1A"),
                React.createElement(Radio.Group, { defaultValue: "white", 
                    // @ts-ignore
                    dataSource: typeList, value: this.state.type, onChange: this.handleType }),
                React.createElement("div", { className: type === 'brand' ? type : theme },
                    React.createElement("p", { key: "1" }, "default"),
                    React.createElement(Search, { key: "2", 
                        // theme={theme}
                        size: size, type: type, disabled: disabled, onSearch: onSearch, style: { width: '400px' } }),
                    React.createElement("p", { key: "3" }, "custom text "),
                    React.createElement(Search, { key: "4", 
                        // theme={theme}
                        size: size, type: type, disabled: disabled, searchText: "search", onSearch: onSearch, style: { width: '400px' } }),
                    React.createElement("p", { key: "5" }, "custom text widthout icon"),
                    React.createElement(Search, { key: "6", 
                        // theme={theme}
                        size: size, type: type, hasIcon: false, disabled: disabled, searchText: React.createElement("span", null, "search"), onSearch: onSearch, style: { width: '400px' } }),
                    React.createElement("p", { key: "7" }, "Suppliers"),
                    React.createElement(Search
                    // theme={theme}
                    , { 
                        // theme={theme}
                        size: size, type: type, disabled: disabled, onChange: this.onChange, onSearch: onSearch, filterProps: { autoWidth: false, color: 'red' }, defaultFilterValue: "Suppliers", filter: dataSource, onFilterChange: this.onFilterChange.bind(this), style: { width: '400px' } }),
                    React.createElement("p", { key: "8" }, "Suppliers and relevance"),
                    React.createElement(Search
                    // theme={theme}
                    , { 
                        // theme={theme}
                        size: size, type: type, disabled: disabled, onChange: this.onChange, onSearch: onSearch, filterProps: { autoWidth: true, color: 'red' }, defaultFilterValue: "Suppliers", filter: dataSource, dataSource: dataSource, onFilterChange: this.onFilterChange.bind(this), style: { width: '400px' } })))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('search-demo-1'));
