import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Menu } from 'antd';
import { LineChartOutlined, AreaChartOutlined, BarChartOutlined, PieChartOutlined, TableOutlined, InfoCircleOutlined, } from '@ant-design/icons';
import { ButtonDropdown } from './ButtonDropdown';
const ChartTypes = [
    { name: 'line', title: 'Line', icon: _jsx(LineChartOutlined, {}) },
    { name: 'area', title: 'Area', icon: _jsx(AreaChartOutlined, {}) },
    { name: 'bar', title: 'Bar', icon: _jsx(BarChartOutlined, {}) },
    { name: 'pie', title: 'Pie', icon: _jsx(PieChartOutlined, {}) },
    { name: 'table', title: 'Table', icon: _jsx(TableOutlined, {}) },
    { name: 'number', title: 'Number', icon: _jsx(InfoCircleOutlined, {}) },
];
const SelectChartType = ({ chartType, updateChartType }) => {
    const [shown, setShown] = useState(false);
    const menu = (_jsx("div", { className: "test simple-overlay", children: _jsx(Menu, { "data-testid": "chart-type-dropdown", className: "ant-dropdown-menu ant-dropdown-menu-root", children: ChartTypes.map((m) => (_jsxs(Menu.Item, { className: "ant-dropdown-menu-item", onClick: () => updateChartType(m.name), children: [m.icon, " ", m.title] }, m.title))) }) }));
    const foundChartType = ChartTypes.find((t) => t.name === chartType);
    return (_jsx(ButtonDropdown, { show: shown, "data-testid": "chart-type-btn", overlay: menu, icon: foundChartType?.icon, style: { border: 0 }, onOverlayOpen: () => setShown(true), onOverlayClose: () => setShown(false), onItemClick: () => setShown(false), children: foundChartType?.title || '' }));
};
export default SelectChartType;
//# sourceMappingURL=SelectChartType.js.map