import * as React from 'react';

export const useCopyExample = (content) => {
   React.useEffect(() => {
      // Initialize Code Highlighter
      content.current
         .querySelectorAll('.gatsby-highlight[data-language=html]')
         .forEach((element) => {
            const example = document.createElement('div');
            example.classList.add('code-example');
            example.innerHTML = element.textContent;
            element.parentNode.insertBefore(example, element);
         });

      const envision = window.envision;

      // Initialize jQuery plugins
      // TODO: Would be much nicer to use webpack externals, bu we run into a build issue..
      envision.popover('.example-popover').then((popovers) => {
         // Remove possible remaining popovers from Popover page
         if (!popovers) {
            document
               .querySelectorAll('.env-popover[role="tooltip"]')
               .forEach((el) => {
                  el.parentNode.removeChild(el);
               });
         }
      });

      // Disable example forms
      const forms = document.querySelectorAll('form[action="/"]');
      forms.forEach((form) => {
         form.addEventListener('submit', (e) => {
            e.preventDefault();
         });
      });

      envision.tabs(
         '.example-tabs, .example-tabs1, .example-tabs2, .example-tabs3'
      );

      envision.rangeSlider('.example-range-slider', { values: [20, 70] });

      // To initialize Image slider examples,
      // load method must be triggered again in gatsby.
      window.dispatchEvent(new Event('load'));

      // Initialize Envision plugins

      const exampleSelects = document.querySelectorAll('.example-tag-select');
      for (let i = 0; exampleSelects && i < exampleSelects.length; i++) {
         envision.select(exampleSelects, {
            maxItems: 6,
            create: true,
            i18n: 'en',
         });
      }

      const simpleSelectEl = document.querySelector('#example-tag-select-1');
      if (simpleSelectEl) {
         envision.select(simpleSelectEl, { i18n: 'en' });
      }

      const advancedSelectEl = document.querySelector('#example-tag-select-2');
      if (advancedSelectEl) {
         envision
            .select(advancedSelectEl, {
               maxItems: 5,
               clearButton: true,
               create: true,
               placeholder: 'Select or add tags...',
               items: ['fruit01'],
               i18n: 'en',
               options: [
                  {
                     value: 'fruit01',
                     text: 'Apple',
                  },
                  {
                     value: 'fruit02',
                     text: 'Banana',
                  },
                  {
                     value: 'fruit03',
                     text: 'Grapefruit',
                  },
                  {
                     value: 'fruit04',
                     text: 'Lemon',
                  },
                  {
                     value: 'fruit05',
                     text: 'Pear',
                  },
               ],

               onOptionAdd: function (value, data) {
                  console.log('Added:', value, data);
               },
            })
            .then((selects) => {
               document
                  .getElementById('example-tag-select-2-add')
                  .addEventListener('click', function () {
                     const val = document.getElementById(
                        'example-tag-select-2-tag'
                     ).value;
                     selects[0].addOptions({
                        value: val,
                        text: val,
                     });
                     selects[0].addItem(val);
                  });
            });

         const remoteDataSelectEl = document.querySelector(
            '#example-tag-select-3'
         );
         if (remoteDataSelectEl) {
            envision.select(remoteDataSelectEl, {
               maxItems: 5,
               placeholder: 'Select a Github repository...',
               i18n: 'en',
               valueField: 'url',
               labelField: 'name',
               searchField: ['name'],
               preload: true,
               load: function (query, callback) {
                  query = query || 'sitevision';
                  var url =
                     'https://api.github.com/search/repositories?q=' +
                     encodeURIComponent(query);
                  fetch(url)
                     .then((response) => response.json())
                     .then((json) => {
                        callback(json.items);
                     })
                     .catch(() => {
                        callback();
                     });
               },
            });
         }
      }
   }, [content]);
};

@@ -563,14 +563,16 @@
 ize 
-jQuery
+Envision
  plu
@@ -1043,604 +1043,180 @@
     
-// Disable example forms%0A      const forms = document.querySelectorAll('form%5Baction=%22/%22%5D');%0A      forms.forEach((form) =%3E %7B%0A         form.addEventListener('submit', (e) =%3E %7B%0A            e.preventDefault();%0A         %7D);%0A      %7D);%0A%0A      envision.tabs(%0A         '.example-tabs, .example-tabs1, .example-tabs2, .example-tabs3'%0A      );%0A%0A      envision.rangeSlider('.example-range-slider', %7B values: %5B20, 70%5D %7D);%0A%0A      // To initialize Image slider examples,%0A      // load method must be triggered again in gatsby.%0A      window.dispatchEvent(new Event('load'));%0A%0A      // Initialize Envision plugins
+envision.tabs(%0A         '.example-tabs, .example-tabs1, .example-tabs2, .example-tabs3'%0A      );%0A%0A      envision.rangeSlider('.example-range-slider', %7B values: %5B20, 70%5D %7D);
 %0A%0A  
@@ -4399,24 +4399,410 @@
    %7D%0A      %7D
+%0A%0A      // Disable example forms%0A      const forms = document.querySelectorAll('form%5Baction=%22/%22%5D');%0A      forms.forEach((form) =%3E %7B%0A         form.addEventListener('submit', (e) =%3E %7B%0A            e.preventDefault();%0A         %7D);%0A      %7D);%0A%0A      // To initialize Image slider examples,%0A      // load method must be triggered again in gatsby.%0A      window.dispatchEvent(new Event('load'));
 %0A   %7D, %5Bcont

Update copyExample.js