import { Button } from '@mui/material';
import { ImageUtility } from './generativeFillUtils/ImageHandler';
import { canvasSize } from './generativeFillUtils/generativeFillConstants';
import { Oval } from 'react-loader-spinner';
import './GenerativeFillButtons.scss';
import React = require('react');
import { Doc } from '../../../../fields/Doc';

interface ButtonContainerProps {
    canvasRef: React.RefObject<HTMLCanvasElement>;
    currImg: React.MutableRefObject<HTMLImageElement | null>;
    getEdit: () => Promise<void>;
    loading: boolean;
    onReset: () => void;
}

const Buttons = ({ canvasRef, currImg, loading, getEdit, onReset }: ButtonContainerProps) => {

    return (
        <div className="generativeFillBtnContainer">
            <Button onClick={onReset}>Reset</Button>
            {/* <Button onClick={handleSave}>Save</Button> */}
            {/* <Button
                onClick={() => {
                    if (!canvasRef.current) return;
                    ImageUtility.downloadImageCanvas('/assets/firefly.png');
                }}>
                Download Original
            </Button> */}
            <Button
                variant="contained"
                onClick={() => {
                    getEdit();
                }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                    Get Edit
                    {loading && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff89" strokeWidth={3} strokeWidthSecondary={3} />}
                </span>
            </Button>
        </div>
    );
};

export default Buttons;