import React from 'react';
import { Select } from '../../components/Select';
import { useAdaptable } from '../AdaptableContext';
import { Flex } from 'rebass';
import { SELECT_REPORT_FORMAT_STRING } from '../../Utilities/Constants/GeneralConstants';
export const ReportFormatSelector = (props) => {
    const { reportName, reportFormat, onReportFormatSelected, size = 'normal' } = props;
    const adaptable = useAdaptable();
    const exportApi = adaptable.api.exportApi;
    const allFormats = exportApi.getAvailableSystemFormats();
    const formatItems = allFormats.map((format) => {
        return {
            label: format,
            value: format,
        };
    });
    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
    return (React.createElement(Flex, { "data-name": "report-format-selector", flex: 1, minWidth: 140 },
        React.createElement(Select, { 
            // style={{ width: '100%' }}
            size: size, placeholder: SELECT_REPORT_FORMAT_STRING, disabled: !allFormats.length || reportName == undefined, className: `ab-${elementType}__Export__format-select`, options: formatItems, onChange: (format) => onReportFormatSelected(format), value: reportFormat, isClearable: true })));
};
