/**
 * WordPress dependencies
 */
import { InnerBlocks, useBlockProps } from "@wordpress/block-editor";

/**
 * External dependencies
 */
import React, { useRef } from "react";

export const Save = ({ attributes }: { attributes: Record<string, any> }) => {
  const blockProps = useBlockProps.save();
  const text = attributes.text || 'Shop';
  const title = attributes.title || '';
  const url = attributes.url || 'https://webbshop.contrl.se/demo/';
  const height = attributes.height || '680px';
  console.log('attributes', attributes);

  return (
    <>
      <div {...useBlockProps.save(attributes)}>
        <button style={{display: "block"}} className="wp-block-button wp-block-button__link open-contrl-popup">{text}</button>
        <div  className="contrl-popup" id="contrl-popup" style={{display: "none"}}>
          <div  className="contrl-popup-box" style={{height: height }}>
            <div className="contrl-popup-header">
              <span className="contrl-popup-close">&times;</span>
              <h2>{title}</h2>
            </div>
            <div className="contrl-popup-body">
              <iframe 
                id="contrl-iframe"
                src={url}
                style={{width: "100%", height: "100%", border: "none"}}
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};