import { createBoard } from '@wixc3/react-board';
import {
    Button,
    OverlayToaster,
    ProgressBar,
    Toaster,
} from '@blueprintjs/core';

// board cover
import cover from '../../../../assets/toast/none-loading.svg';

const toaster: Toaster = OverlayToaster.create({
    autoFocus: true,
    canEscapeKeyClear: true,
    maxToasts: 3,
    position: 'top',
    usePortal: true,
});

export default createBoard({
    name: 'None - loading',
    Board: () => {
        return (
            <Button
                intent="none"
                onClick={() =>
                    toaster.show({
                        icon: 'cloud-download',
                        intent: 'none',
                        message: (
                            <div
                                style={{
                                    position: 'relative',
                                    top: 5,
                                }}
                            >
                                <ProgressBar value={0.3} intent="primary" />
                            </div>
                        ),
                    })
                }
            >
                Toast
            </Button>
        );
    },
    tags: ['load', 'minimal', 'none', 'toast'],
    cover,
});
