// 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, onSave, addSignatureToPdf, btnloading }) => {
    const sigCanvas = useRef({});
    const { t, i18n } = useTranslation(); // To Translate to another language

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

    const save = () => {
        if (onSave) {
            onSave(sigCanvas.current.toDataURL('image/png'));
            message.success(t('Signature Saved'));
        }
    };

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

            <p>
                <small><strong>Save</strong> your signature and Add to the document by clicking on <strong>Add Signature</strong></small>
            </p>

            <div className='signature-actions'>
                <div className='left'>
                    <Button
                        style={{ borderRadius: '2px', marginRight: '4px' }}
                        type="primary"
                        size="medium"
                        onClick={save}
                    >
                        {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;
