import React, { useState } from 'react';
import { Space, Tooltip } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import ButtonGroup from '../buttonGroup';
import ColumnSetting from '../columnSetting';
import { useFeatures } from '../../../platforms/web';
import Style from './index.module.less';
function isPromiseLike(value) {
    return !!value && typeof value.then === 'function';
}
function ToolBar(props) {
    const { title, buttonGroup, reload, extraContent, reloadLoading } = props;
    const features = useFeatures();
    const [internalReloading, setInternalReloading] = useState(false);
    const reloading = !!reloadLoading || internalReloading;
    const handleReload = () => {
        if (!reload || reloading) {
            return;
        }
        setInternalReloading(true);
        try {
            const result = reload();
            if (isPromiseLike(result)) {
                void Promise.resolve(result).finally(() => {
                    setInternalReloading(false);
                });
            }
            else {
                setInternalReloading(false);
            }
        }
        catch (err) {
            setInternalReloading(false);
            throw err;
        }
    };
    return (<div className={Style.toolbarContainer}>
            <div className={Style.title}>{title}</div>
            <div className={Style.toolbarRight}>
                <Space align='center'>
                    {extraContent}
                    {buttonGroup && buttonGroup.length > 0 && (<ButtonGroup items={buttonGroup}/>)}
                    {reload &&
            <Tooltip title={features.locales.t('reload')}>
                            <div className={`${Style.reloadIconBox} ${reloading ? Style.reloadIconBoxLoading : ''}`} aria-disabled={reloading} onClick={handleReload}>
                                <ReloadOutlined spin={reloading}/>
                            </div>
                        </Tooltip>}
                    <ColumnSetting />
                </Space>
            </div>
        </div>);
}
export default ToolBar;