(function (wp) {
  const { registerBlockType } = wp.blocks;
  const { InspectorControls } = wp.blockEditor;
  const { PanelBody, RangeControl, TextControl, SelectControl } = wp.components;
  const ServerSideRender = wp.serverSideRender;
  const el = wp.element.createElement;
  const { __ } = wp.i18n;

  function uplatnicaEdit(props) {
    const { attributes, setAttributes } = props;
    const { order, width, height, align, alt, title, class: className } = attributes;

    return el(
      wp.element.Fragment,
      {},
      el(
        InspectorControls,
        {},
        el(
          PanelBody,
          { title: __('Podešavanja uplatnice', 'wooplatnica') },
          el(TextControl, {
            label: __('ID porudžbine (prazno = trenutna/poslednja)', 'wooplatnica'),
            value: order,
            onChange: (value) => setAttributes({ order: value }),
          }),
          el(SelectControl, {
            label: __('Poravnanje', 'wooplatnica'),
            value: align,
            options: [
              { label: __('Bez poravnanja', 'wooplatnica'), value: 'none' },
              { label: __('Levo', 'wooplatnica'), value: 'left' },
              { label: __('Centar', 'wooplatnica'), value: 'center' },
              { label: __('Desno', 'wooplatnica'), value: 'right' },
            ],
            onChange: (value) => setAttributes({ align: value }),
          }),
          el(RangeControl, {
            label: __('Širina (px, 0 = automatski)', 'wooplatnica'),
            value: width,
            min: 0,
            max: 1200,
            onChange: (value) => setAttributes({ width: value }),
          }),
          el(RangeControl, {
            label: __('Visina (px, 0 = automatski)', 'wooplatnica'),
            value: height,
            min: 0,
            max: 1200,
            onChange: (value) => setAttributes({ height: value }),
          }),
          el(TextControl, {
            label: __('Alt tekst', 'wooplatnica'),
            value: alt,
            onChange: (value) => setAttributes({ alt: value }),
          }),
          el(TextControl, {
            label: __('CSS klasa', 'wooplatnica'),
            value: className,
            onChange: (value) => setAttributes({ class: value }),
          })
        )
      ),
      el(ServerSideRender, {
        block: 'wooplatnica/uplatnica',
        attributes: attributes,
      })
    );
  }

  function ipsQrEdit(props) {
    const { attributes, setAttributes } = props;
    const { order, size, width, height, alt, title, class: className } = attributes;

    return el(
      wp.element.Fragment,
      {},
      el(
        InspectorControls,
        {},
        el(
          PanelBody,
          { title: __('Podešavanja IPS QR kôda', 'wooplatnica') },
          el(TextControl, {
            label: __('ID porudžbine (prazno = trenutna/poslednja)', 'wooplatnica'),
            value: order,
            onChange: (value) => setAttributes({ order: value }),
          }),
          el(RangeControl, {
            label: __('Veličina (px, maksimalno 547)', 'wooplatnica'),
            value: size,
            min: 128,
            max: 547,
            onChange: (value) => setAttributes({ size: value }),
          }),
          el(RangeControl, {
            label: __('Širina (px, 0 = automatski)', 'wooplatnica'),
            value: width,
            min: 0,
            max: 1200,
            onChange: (value) => setAttributes({ width: value }),
          }),
          el(RangeControl, {
            label: __('Visina (px, 0 = automatski)', 'wooplatnica'),
            value: height,
            min: 0,
            max: 1200,
            onChange: (value) => setAttributes({ height: value }),
          }),
          el(TextControl, {
            label: __('Alt tekst', 'wooplatnica'),
            value: alt,
            onChange: (value) => setAttributes({ alt: value }),
          }),
          el(TextControl, {
            label: __('CSS klasa', 'wooplatnica'),
            value: className,
            onChange: (value) => setAttributes({ class: value }),
          })
        )
      ),
      el(ServerSideRender, {
        block: 'wooplatnica/ips-qr',
        attributes: attributes,
      })
    );
  }

  registerBlockType('wooplatnica/uplatnica', {
    title: __('Wooplatnica: Uplatnica', 'wooplatnica'),
    description: __('Prikazuje sliku opšte uplatnice za porudžbinu.', 'wooplatnica'),
    icon: 'media-default',
    category: 'widgets',
    attributes: {
      order: { type: 'string', default: '' },
      width: { type: 'number', default: 0 },
      height: { type: 'number', default: 0 },
      align: { type: 'string', default: 'none' },
      alt: { type: 'string', default: '' },
      title: { type: 'string', default: '' },
      class: { type: 'string', default: '' },
    },
    edit: uplatnicaEdit,
    save: function () {
      return null;
    },
  });

  registerBlockType('wooplatnica/ips-qr', {
    title: __('Wooplatnica: IPS QR kôd', 'wooplatnica'),
    description: __('Prikazuje NBS IPS QR kôd za instant plaćanje porudžbine.', 'wooplatnica'),
    icon: 'screenoptions',
    category: 'widgets',
    attributes: {
      order: { type: 'string', default: '' },
      size: { type: 'number', default: 512 },
      width: { type: 'number', default: 0 },
      height: { type: 'number', default: 0 },
      alt: { type: 'string', default: '' },
      title: { type: 'string', default: '' },
      class: { type: 'string', default: '' },
    },
    edit: ipsQrEdit,
    save: function () {
      return null;
    },
  });
})(window.wp);
