import { useBlockProps } from '@wordpress/block-editor';

import './style.scss';

const Save = (props) => {
    const {
        attributes: {
            serverUrl, groupAlias, projectName, driveAppAlias, embedType,
            pingInterval, formHeight, messageFormComplete, messageFormCancel,
            onComplete, onCancel
        }
    } = props;

    const blockProps = useBlockProps.save({
        className: "driveworks-block-form-embed dw-is-loading",
    });

    return (
        <div
            {...blockProps}
            data-driveworks-block-embed
            data-type={embedType}
            data-server-url={serverUrl}
            data-group-alias={groupAlias}
            data-name={embedType == "DriveApp" ? driveAppAlias : projectName}
            data-ping-interval={pingInterval}
            data-height={formHeight}
            data-on-complete={onComplete}
            data-on-cancel={onCancel}
        >
            <div
                className="dw-form-output"
                data-form-output
                style={{ height: (formHeight ? formHeight : "auto") }}
            >
                <div className="dw-embed-loading dw-embed-message">Loading...</div>
            </div>
            <div className="dw-message-form-complete" data-message={messageFormComplete || "Thank you for your submission."}></div>
            <div className="dw-message-form-cancel" data-message={messageFormCancel || "This submission has been cancelled."}></div>
        </div>
    );
}

export default Save;