import Balloon from '../../balloon';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '..';
const { Tooltip } = Balloon;
const dataSource = [
    { value: '10001', label: 'Lucy King' },
    { value: 10002, label: 'Lily King' },
    { value: 10003, label: 'Tom Cat', disabled: true },
    {
        label: 'Special Group',
        children: [
            { value: -1, label: 'FALSE' },
            { value: 0, label: 'ZERO' },
        ],
    },
];
function handleChange(value) {
    console.log(value);
}
const maxTagPlaceholder = (selectedValues, totalValues) => {
    const trigger = (React.createElement("span", null, `${selectedValues.length}/${totalValues.length}`));
    const labels = selectedValues.map(obj => obj.label);
    return React.createElement(Tooltip, { trigger: trigger }, labels.join(', '));
};
const style = { width: 200, marginRight: 8 };
ReactDOM.render(React.createElement("div", { style: { display: 'flex', alignItems: 'flex-start' } },
    React.createElement(Select, { placeholder: "select all", hasSelectAll: true, mode: "multiple", onChange: handleChange, dataSource: dataSource, style: style }),
    React.createElement(Select, { maxTagCount: 2, defaultValue: ['10001', '10002', '-1'], mode: "multiple", onChange: handleChange, dataSource: dataSource, style: style }),
    React.createElement(Select, { maxTagCount: 2, maxTagPlaceholder: maxTagPlaceholder, defaultValue: ['10001', '10002', '-1'], mode: "multiple", onChange: handleChange, dataSource: dataSource, style: style }),
    React.createElement(Select, { maxTagCount: 2, tagInline: true, mode: "multiple", defaultValue: ['10001', '10002', '-1'], onChange: handleChange, dataSource: dataSource, style: style }),
    React.createElement("br", null),
    React.createElement("br", null)), document.getElementById('select-demo-4'));
