'use strict';
// MainScreen as an option for delegate functions
class ShortPixelScreen extends ShortPixelScreenItemBase
{
    isCustom = true;
    isMedia = true;
		type = 'custom';
    folderTree = null;
    currentSelectedPath = null;
		stopSignal = false;

    Init()
  	{
  		super.Init();

      this.InitFolderSelector();
			this.InitScanButtons();
      this.InitFileScreenAction();
  	}

    RenderItemView(e)
    {
        var data = e.detail;

        if (data.custom)
        {
            var id = data.custom.id;
            var element = document.getElementById('sp-msg-' + id);
            element.outerHTML = data.custom.itemView;

            var isOptimizable = data.custom.is_optimizable;
            var isRestorable = data.custom.is_restorable;

            var inputSelect = document.querySelector('.item-' + id + ' input[name="select[]"]');

            if (null === inputSelect)
            {
               console.warn('Checkbox not found ' + id);
            }

            inputSelect.classList.remove('is-optimizable', 'is-restorable');
            if (true === isOptimizable)
              inputSelect.classList.add('is-optimizable');

            if (true === isRestorable)
              inputSelect.classList.add('is-restorable');


        }

        return false;
    }

		// Check if the processor needs to start when items are being added / folders refreshed
		CheckProcessorStart()
		{
			// If automedia is active, see if something is to process.
			if (this.processor.IsAutoMediaActive())
			{
				 this.processor.SetInterval(-1);
				 this.processor.RunProcess();
			}
		}

    RefreshFolder(id)
    {
        var data = {};
        data.id = id;
        data.type = 'folder';
        data.screen_action = 'refreshFolder';
        data.callback = 'shortpixel.folder.HandleFolderResult';

        window.addEventListener('shortpixel.folder.HandleFolderResult', this.HandleFolderResult.bind(this), {'once':true});

        // AjaxRequest should return result, which will go through Handleresponse, then LoaditemView.
        this.processor.AjaxRequest(data);
    }

    StopMonitoringFolder(id)
    {

       if (confirm('Are you sure you want to stop optimizing this folder? '))
       {
         var data = {};
         data.id = id;
         data.type = 'folder';
         data.screen_action = 'removeCustomFolder';
         data.callback = 'shortpixel.folder.HandleFolderResult';

         window.addEventListener('shortpixel.folder.HandleFolderResult', this.HandleFolderResult.bind(this), {'once':true});
         this.processor.AjaxRequest(data);
       }
    }

    HandleFolderResult(e)
    {
       var data = e.detail;

       if (data.folder)
       {
          var folder_id = data.folder.id;
          if (data.folder.message)
          {
             var el = document.querySelector('.shortpixel-other-media .item.item-' + folder_id + ' .status');
             if (null !== el)
             {
                el.innerHTML = data.folder.message;
             }
             else {
               console.error('Status Element not found for '  + folder_id);
             }
          }

          if (data.folder.fileCount)
          {
             var el = document.querySelector('.shortpixel-other-media .item.item-' + folder_id + ' .files-number');
             if (null !== el)
             {
                el.innerText = data.folder.fileCount;
             }
             else {
               console.error('FileCount Element not found for '  + folder_id);
             }
          }

          if (data.folder.action == 'remove')
          {
             if (true == data.folder.is_done)
             {
                 var el = document.querySelector('.shortpixel-other-media .item.item-' + folder_id);
                 if ( null !== el)
                 {
                   el.remove();
                 }
                 else {
                   console.error('Row Element not found for '  + folder_id);
                 }

             }
          }

       }

			 this.CheckProcessorStart();
    }

		InitScanButtons()
		{
			 var scanButtons = document.querySelectorAll('.scan-button');
			 var self = this;

			 if (null !== scanButtons)
			 {
				 	scanButtons.forEach(function (scanButton) {
						scanButton.addEventListener('click', self.StartFolderScanEvent.bind(self));
					});
			 }

			 var stopButton = document.querySelector('.scan-actions .stop-button');
			 if (null !== stopButton)
			 {
				  stopButton.addEventListener('click', this.StopScanEvent.bind(this));
			 }

		}

    InitFolderSelector()
    {
      var openModalButton = document.querySelector('.open-selectfolder-modal');
      if (null !== openModalButton)
      {
        openModalButton.addEventListener('click', this.OpenFolderModal.bind(this));
      }

      var closeModalButtons = document.querySelectorAll('.shortpixel-modal input.select-folder-cancel, .sp-folder-picker-shade');

      var self = this;
      closeModalButtons.forEach(function (button, index)
      {
          button.addEventListener('click', self.CloseFolderModal.bind(self));
      });

      var addFolderButton = document.querySelector('.modal-folder-picker .select-folder')
      if (null !== addFolderButton)
      {
        addFolderButton.addEventListener('click', this.AddNewFolderEvent.bind(this));
      }
    }

    InitFileScreenAction()
    {
       var selectAll = document.querySelector('input[name="select-all"]');
       if (null !== selectAll)
        selectAll.addEventListener('change', this.SelectAllItemsEvent.bind(this));


       var bulkAction = document.querySelector('button[name="doBulkAction"]');
       if (null !== bulkAction)
        bulkAction.addEventListener('click', this.BulkActionEvent.bind(this));

    }

    SelectAllItemsEvent(event)
    {
       var parent = event.target;
       var inputs = document.querySelectorAll('input[name="select[]"]');

       var toggle = (true === parent.checked) ? true : false;

       for(var i = 0; i < inputs.length; i++)
       {
         inputs[i].checked = toggle;

       }

    }

    BulkActionEvent(event)
    {
       event.preventDefault();
       var target = event.target;

       var items = document.querySelectorAll('input[name="select[]"]:checked');
       var selectBox = document.querySelector('select[name="bulk-actions"]');
       var selectedAction = selectBox.options[selectBox.selectedIndex];
       selectBox.selectedIndex = 0; // Return to default

       var action = selectedAction.value;


       for (var i = 0; i < items.length; i++)
       {
           var item = items[i];
           if (false == item.checked) // failsafe
           {
              continue;
           }
           var item_id = item.value;

           if ('optimize' === action)
           {
              if (item.classList.contains('is-optimizable'))
              {
               this.Optimize(item_id);
              }
           }
           else if ('restore' === action)
           {
              if (item.classList.contains('is-restorable'))
              {
                this.RestoreItem(item_id);
              }
           }
           else if ('mark-completed' === action)
           {
             if (item.classList.contains('is-optimizable'))
             {
               this.MarkCompleted(item_id);
             }

           }
           else {
           }

           item.checked = false;
       }

       var selectAll = document.querySelector('input[name="select-all"]');
       selectAll.checked = false;
    }

    OpenFolderModal()
    {
      var shade  = document.querySelector(".sp-folder-picker-shade");
    //  this.FadeIn(shade, 500);
      this.Show(shade);

      var picker = document.querySelector(".shortpixel-modal.modal-folder-picker");
      picker.classList.remove('shortpixel-hide');
      picker.style.display = 'block';

      var picker = document.querySelector(".sp-folder-picker");

      if (null === this.folderTree)
      {
        this.folderTree = new ShortPixelFolderTree(picker, this.processor);
        picker.addEventListener('shortpixel-folder.selected', this.HandleFolderSelectedEvent.bind(this));
      }

      this.Show(picker);
    }

    HandleFolderSelectedEvent(event)
    {
        var data = event.detail;
        var relpath = data.relpath;

        var selectedField = document.querySelector('.sp-folder-picker-selected');
        selectedField.textContent = relpath;

        this.currentSelectedPath = relpath;

        if (null !== this.currentSelectedPath)
        {
          var addFolderButton = document.querySelector('.modal-folder-picker .select-folder');
          if (null !== addFolderButton)
          {
            addFolderButton.disabled = false;
          }
        }
    }

    CloseFolderModal()
    {
      var shade  = document.querySelector(".sp-folder-picker-shade");
      this.Hide(shade);

      // @todo FadeOut function here
      var picker = document.querySelector('.shortpixel-modal.modal-folder-picker');
      this.Hide(picker);
    }

    AddNewFolderEvent(event)
    {
      var data = {};
      data.relpath = this.currentSelectedPath;
      data.type = 'folder';
      data.screen_action = 'addCustomFolder';
      data.callback = 'shortpixel.folder.AddNewDirectory';

      // @todo this message logic should prob. become part of the folder selector js proper.
      var messageEl = document.querySelector('.modal-folder-picker .folder-message');
      if (null !== messageEl)
      {
           if ( false == messageEl.classList.contains('hidden'))
           {
               messageEl.classList.add('hidden');
           }
      }

      window.addEventListener('shortpixel.folder.AddNewDirectory', this.UpdateFolderViewEvent.bind(this), {'once':true});

      this.processor.AjaxRequest(data);


    }

    UpdateFolderViewEvent(event)
    {
        var data = event.detail;

        // not for us.
        if (false === data.folder)
          return false;

        if (data.folder.result && data.folder.result.itemView)
        {
           var element = document.querySelector('.list-overview .item');
					 var elementHeading = document.querySelector('.list-overview .heading');

           if (null !== element)
           {
                element.insertAdjacentHTML('beforebegin', data.folder.result.itemView);
           }
					 else if (null !== elementHeading) // In case list is empty.
					 {
						 		elementHeading.insertAdjacentHTML('afterend',  data.folder.result.itemView);
								var noitems = document.querySelector('.list-overview .no-items');
								if (null !== noitems)
									noitems.remove();
					 }

          this.CloseFolderModal();
   				this.CheckProcessorStart();

        }
        else if (data.folder.is_error == true && data.folder.message)
        {
           var messageEl = document.querySelector('.modal-folder-picker .folder-message');
           if (null !== messageEl)
           {
               messageEl.textContent = data.folder.message;
               messageEl.classList.remove('hidden');
           }
        }

    }

    StartFolderScanEvent(event)
    {
			 var element = event.target;
			 this.stopSignal = false;
			 this.ToggleScanInterface(true);

			 var force = false;
			 if ('mode' in element.dataset)
			 {
				  var force = true;
			 }

		  var reportElement = document.querySelector('.scan-area .result-table');
			while(reportElement.firstChild)
			{
				 reportElement.firstChild.remove();
			}

			var args = [];
			args.force = force;

			if (true === force)
			{
				var data = {};
				data.type = 'folder';
				data.screen_action = 'resetScanFolderChecked';
				data.callback = 'shortpixel.folder.ScanFolder';

				window.addEventListener('shortpixel.folder.ScanFolder', this.ScanFolder.bind(this, args), {'once':true});
				this.processor.AjaxRequest(data);

			}
			else {
				this.ScanFolder(args);
			}

    }

		ScanFolder(args)
		{
			if (true === this.stopSignal)
			{
				 return false;
			}
			var data = {};
			data.type = 'folder';
			data.screen_action = 'scanNextFolder';
			data.callback = 'shortpixel.folder.ScannedDirectoryEvent';

			if (true === args.force)
			{
				 data.force = args.force;
			}

			window.addEventListener('shortpixel.folder.ScannedDirectoryEvent', this.ScannedDirectoryEvent.bind(this, args), {'once':true});
			this.processor.AjaxRequest(data);
		}

		ScannedDirectoryEvent(args, event)
		{
			var data = event.detail;
			data = data.folder;

			var reportElement = document.querySelector('.scan-area .result-table');
			if ( null === reportElement)
			{
				 console.error('Something wrong with reporting element');
				 return false;
			}

			if (data.is_done === true)
			{
				// @todo Probably emit some done status here
				var div = document.createElement('div');
				div.classList.add('message');
				div.textContent = data.result.message;
				this.ToggleScanInterface(false);

				reportElement.appendChild(div);
			}
			else if (data.result)
			{
					var div = document.createElement('div');
					var span_path = document.createElement('span');
					var span_filecount = document.createElement('span');
					var span_message = document.createElement('span');

					span_path.textContent = data.result.path;
					span_filecount.textContent = data.result.new_count;
					span_message.textContent = data.result.message;

					div.appendChild(span_path);
					div.appendChild(span_filecount);
					div.appendChild(span_message);
					reportElement.appendChild(div);

					var self = this;
					setTimeout( function () { self.ScanFolder(args) }, 200);
			}
		}

		StopScanEvent(event)
		{
			 this.stopSignal = true;

			var reportElement = document.querySelector('.scan-area .result-table');
 			if ( null === reportElement)
 			{
 				 console.error('Something wrong with reporting element');
 				 return false;
 			}

			var div = document.createElement('div');
			div.classList.add('message');
			div.textContent = this.strings.stopActionMessage;

			reportElement.appendChild(div);

			this.ToggleScanInterface(false);

		}

		ToggleScanInterface(show)
		{
				if (typeof show === 'undefined')
				{
					 var show = true;
				}

				var divs = document.querySelectorAll('.scan-actions > div');

				divs.forEach(function(div){
						if (div.classList.contains('action-scan') && true === show)
						{
								div.classList.add('not-visible');
						}
						else if (div.classList.contains('action-scan') && false === show) {
								div.classList.remove('not-visible');
						}
						else if ( div.classList.contains('action-stop') && true === show)
						{
							div.classList.remove('not-visible');
						}
						else {
							div.classList.add('not-visible');
						}
				});

				var output = document.querySelector('.scan-area .output');
				if (null !== output && true === show)
				{
					 output.classList.remove('not-visible');
				}
		}

} // class