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

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

export const DataTableSaveButton: React.FC<DataTableSaveButtonProps> = ({ 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' : 'info'}
                    disabled={processing || disabled}
                    onClick={onClick}>
                    {
                        icon ? icon :
                            <SvgIcon fontSize="small" width="24" height="24" overflow="hidden" viewBox="0 0 24 24">
                                <g>
                                    <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" />
                                </g>
                            </SvgIcon>
                    }
                </IconButton>
                {
                    processing &&
                    <ActionCircularProgress />
                }
            </span>
        </ArrowTooltip>
    )
}