/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";

import { InspectorControls , useBlockProps, RichText } from "@wordpress/block-editor";
import { Template, TemplateArray } from "@wordpress/blocks";
import { PanelBody, TextControl } from '@wordpress/components';

/**
 * External dependencies
 */
import React from "react";

export const Edit = ({
  attributes,
  setAttributes,
}: {
  attributes: Record<string, any>;
  setAttributes: (attributes: Record<string, any>) => void;
  }) => {
  const blockProps = useBlockProps(attributes);
  const text = attributes.text || __("Shop", "contrl");
  const title = attributes.title || __("Shop", "contrl");
  const url = attributes.url || 'https://webbshop.contrl.se/demo/';
  const height = attributes.height || '680px';
  

  return (
    <>
      <div {...blockProps}>
      <RichText
         value={ text || '' }
         onChange={ ( value ) =>
             setAttributes( { text: value } )
         }
         className="wp-block-button wp-block-button__link"
         placeholder={ __( 'Button label', 'contrl' ) }
         allowedFormats={ [ 'core/bold', 'core/italic' ] }
      />
      </div>

      <InspectorControls>
        <PanelBody title={ __( 'Settings', 'contrl' ) }>
          <TextControl
              label={ __(
                  'Contrl shop url',
                  'contrl'
              ) }
              value={ url || '' }
              onChange={ ( value ) =>
                  setAttributes( { url: value } )
              }
          />
          <TextControl
              label={ __(
                  'Popup shop title',
                  'contrl'
              ) }
              value={ title || '' }
              onChange={ ( value ) =>
                  setAttributes( { title: value } )
              }
          />
          <TextControl
              label={ __(
                  'Popup container height',
                  'contrl'
              ) }
              value={ height || '' }
              onChange={ ( value ) =>
                  setAttributes( { height: value } )
              }
          />
        </PanelBody>
      </InspectorControls>
    </>
    
  );
};