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

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

export const DataTableDownloadButton: React.FC<DataTableDownloadButtonProps> = ({ 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="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" />
                                </g>
                            </SvgIcon>
                    }
                </IconButton>
                {
                    processing &&
                    <ActionCircularProgress />
                }
            </span>
        </ArrowTooltip>
    )
}