/*
 * view-scale
 * (c) 2020 SP12893678 (https://github.com/SP12893678)
 * under the MIT license
 */

'use strict';
const electron = require('electron');
const { createElement } = require('../../pkg/helpers.js');

module.exports = {
  id: 'e71ce1e0-024c-435e-a25e-7dd50448d1df',
  tags: ['extension'],
  name: 'view-scale',
  desc: 'scale the notion view',
  version: '1.0.0',
  author: 'SP12893678',
  options: [
    {
      key: 'showUI',
      label: 'show scale ui',
      type: 'toggle',
      value: true,
    },
    {
      key: 'offset',
      label: 'set scale plus and minus offset',
      type: 'input',
      value: 10,
    },
    {
        key: 'zoom',
        label: 'set scale default value',
        type: 'input',
        value: 100,
    }
  ],
  hacks: {
    'renderer/preload.js'(store, __exports) {
        document.addEventListener('readystatechange', (event) => {
            if (document.readyState !== 'complete') return false;
            
            const attempt_interval = setInterval(enhance, 500);
            function enhance() {
                if (!document.querySelector('.notion-frame')) return;
                clearInterval(attempt_interval);

                electron.webFrame.setZoomFactor(store().zoom / 100) 
                let zoom = store().zoom / 100
                let offset = store().offset / 100
                let minZoom = 0.5
                let maxZoom = 2

                const $container = document.createElement('div');
                const $helpButton = document.querySelector('.notion-help-button');

                const $scaleSet = createElement('<div class="notion-scale-contaienr"></div>');
                const $scalePlusButton = createElement('<div class="notion-scale-button">＋</div>');
                const $scaleView = createElement('<div class="notion-scale-view">100%</div>');
                const $scaleMinusButton = createElement('<div class="notion-scale-button">－</div>');

                if(store().showUI){
                    $scalePlusButton.addEventListener('click',()=>{
                        zoomPlus()
                        if(store().showUI) changeScaleViewUIValue()
                    })
                    $scaleMinusButton.addEventListener('click',()=>{
                        zoomMinus()
                        if(store().showUI) changeScaleViewUIValue()
                    })
    
                    $scaleSet.append($scalePlusButton)
                    $scaleSet.append($scaleView)
                    $scaleSet.append($scaleMinusButton)
                    
                    $container.className = 'bottom-right-buttons';
                    $helpButton.after($container);
                    $container.append($scaleSet);
                    $container.append($helpButton);

                    changeScaleViewUIValue()
                }

                document.defaultView.addEventListener('keydown', (event) => {
                    if (event.key == '+' && event.ctrlKey){
                        zoomPlus()
                        if(store().showUI) changeScaleViewUIValue()
                    }
                        
                    if (event.key == '-' && event.ctrlKey){
                        zoomMinus()
                        if(store().showUI) changeScaleViewUIValue()
                    }
                })
        
                function zoomPlus() {
                    if(zoom + offset > maxZoom) return
                    zoom += offset
                    electron.webFrame.setZoomFactor(zoom)
                }
        
                function zoomMinus() {
                    if(zoom + offset < minZoom) return
                    zoom -= offset
                    electron.webFrame.setZoomFactor(zoom)    
                }

                function changeScaleViewUIValue() {
                    $scaleView.innerHTML = Math.round(zoom * 100) + "%"
                }
            }
        })
    },
  },
};