// src/components/SignatureCanvas.js
import { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import { Button, message } from 'antd';
import { useTranslation } from '../../../lib';

import './signature-pad.scss';



const SignatureCanvasComponent = ({ onClear, onSaveAndAddSignature, btnloading }) => {
    const sigCanvas = useRef({});
    const { t, i18n } = useTranslation(); // To Translate to another language

    const clear = () => {
        sigCanvas.current.clear()
        if (onClear) onClear();
    };

    /**
     * 
     * @returns 
     */
    const saveAndAddSignature = () => {
        if (sigCanvas.current.isEmpty()) {
            message.error(t('No signature found'));
            return;
        }
        // Get the signature as a data URL
        const signatureData = sigCanvas.current.toDataURL('image/png');
        if (onSaveAndAddSignature) {
            // Pass the signature data immediately
            onSaveAndAddSignature(signatureData);
        }
    };

    return (
        <div className='signature-pad'>
            <SignatureCanvas
                ref={sigCanvas}
                canvasProps={{
                    width: 600,
                    height: 200,
                    className: 'sigCanvas',
                    style: { border: '1px solid black' }
                }}
            />

            <p>
                <small>Click<strong> Save </strong>to add signature and save the document</small>
            </p>

            <div className='signature-actions'>
                <div className='left'>
                    <Button
                        loading={btnloading}
                        style={{ borderRadius: '2px', marginRight: '4px' }}
                        type="primary"
                        size="medium"
                        onClick={saveAndAddSignature}
                    >
                        {t('Save')}
                    </Button>
                    <Button
                        style={{ borderRadius: '2px' }}
                        type="secondary"
                        size="medium"
                        onClick={clear}
                    >
                        {t('Clear')}
                    </Button>

                </div>
                {/* 
                <Button
                    loading={btnloading}
                    style={{ borderRadius: '2px' }}
                    type="primary"
                    size="medium"
                    onClick={addSignatureToPdf}
                >
                    {t('Add Signature')}
                </Button> */}
            </div>
        </div>

    );
};

export default SignatureCanvasComponent;
