import React from 'react';
import { IconButton, SvgIcon } from '@mui/material';
import { ArrowTooltip } from '../../tooltip/arrow';
import { ActionCircularProgress } from './style';

export interface DataTableCustomButtonProps {
    tooltip?: string,
    icon: React.ReactNode,
    disabled: boolean,
    processing: boolean,
    onClick: () => void
}

export const DataTableCustomButton: React.FC<DataTableCustomButtonProps> = ({ tooltip, icon, disabled, processing, onClick }) => {
    return (
        <ArrowTooltip arrow title={tooltip ? tooltip : ''} placement="top">
            <span style={{ position: 'relative' }}>
                <IconButton
                    style={{ marginRight: '5px' }}
                    edge="start"
                    color={processing ? 'default' : 'primary'}
                    disabled={processing || disabled}
                    onClick={onClick}>
                    {
                        icon ? icon :
                            <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
                                <g>
                                    <path d="M15.96 10.29l-2.75 3.54-1.96-2.36L8.5 15h11l-3.54-4.71zM3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" />
                                </g>
                            </SvgIcon>
                    }
                </IconButton>
                {
                    processing &&
                    <ActionCircularProgress />
                }
            </span>
        </ArrowTooltip>
    )
}