'use strict'

var uiHelpers = require('../utils/ui-helpers')
// var eventHandlers = require('../event-handlers')

var tinymce = window.tinymce

module.exports = {
  createFormatTab: createFormatTab
}

/**
 * Create the general tab component that show form inputs for:
 * - paper labeled formats,
 * - paper custom size
 * @method
 * @returns {TabPanel} formatTab
 */
function createFormatTab (format) {
  // format select box
  var formats = tinymce.activeEditor.plugins.headersfooters.availableFormats
  var formatValues = []
  for (var name in formats) {
    var f = formats[name]
    formatValues.push({
      text: f.name,
      value: f.name
    })
  }
  var formatSelectBox = uiHelpers.createSelectBox('Format', 'newformat', formatValues, 150)

  // orientation select box
  var orientationSelectBox = uiHelpers.createSelectBox('Orientation', 'orientation', [
    {text: 'paysage', value: 'paysage'},
    {text: 'portrait', value: 'portrait'}
  ], 150)

  // page height form inputs
  var pageHeightTextBox = uiHelpers.createTextBox('Page height', 'pageHeight', 65)
  var pageHeightUnitSelect = uiHelpers.createUnitSelectBox('pageHeightUnit', 'mm')

  // page width form inputs
  var pageWidthTextBox = uiHelpers.createTextBox('Page width', 'pageWidth', 65)
  var pageWidthUnitSelect = uiHelpers.createUnitSelectBox('pageWidthUnit', 'mm')

  formatSelectBox.on('select', function (e) {
    var selectValue = e.control.value()
    var _format = formats[selectValue]
    pageHeightTextBox.value(_format.height.slice(0, -2)) // using raw 'mm' value
    pageWidthTextBox.value(_format.width.slice(0, -2)) // using raw 'mm' value
  })
  orientationSelectBox.on('select', function (e) {
    var selectValue = formatSelectBox.value()
    var _format = formats[selectValue]
    if (orientationSelectBox.value() === 'portrait') {
      pageHeightTextBox.value(_format.width.slice(0, -2)) // using raw 'mm' value
      pageWidthTextBox.value(_format.height.slice(0, -2)) // using raw 'mm' value
    } else {
      pageHeightTextBox.value(_format.height.slice(0, -2)) // using raw 'mm' value
      pageWidthTextBox.value(_format.width.slice(0, -2)) // using raw 'mm' value
    }
  })

  // paperSize fieldset form
  var formatForm = uiHelpers.createForm([
    formatSelectBox,
    orientationSelectBox
  ], 1)

  // paperSize fieldset form
  var paperSizeForm = uiHelpers.createForm([
    pageHeightTextBox, pageHeightUnitSelect,
    pageWidthTextBox, pageWidthUnitSelect
  ], 2)

  // format fieldset
  var formatFieldSet = uiHelpers.createFieldset('Format', [formatForm], null, 300)

  // format fieldset
  var paperSizeFieldSet = uiHelpers.createFieldset('Paper Size', [paperSizeForm], 460)

  // tab
  var tab = uiHelpers.createTab('Paper Format', [formatFieldSet, paperSizeFieldSet])

  return tab
}

@@ -190,16 +190,54 @@
 ormatTab
+,%0A  createMarginsTab: createMarginsTab
 %0A%7D%0A%0A/**%0A
@@ -2827,12 +2827,1271 @@
 eturn tab%0A%7D%0A
+%0A/**%0A * Create the margins tab component that show form inputs for:%0A * - paper margins%0A * @method%0A * @returns %7BTabPanel%7D marginTab%0A */%0Afunction createMarginsTab (format) %7B%0A  var marginTopTextBox = uiHelpers.createTextBox('Margin top', 'marginTop', 65)%0A  var marginTopUnitSelect = uiHelpers.createUnitSelectBox('marginTopUnit', 'mm')%0A%0A  var marginRightTextBox = uiHelpers.createTextBox('Margin right', 'marginRight', 65)%0A  var marginRightUnitSelect = uiHelpers.createUnitSelectBox('marginRightUnit', 'mm')%0A%0A  var marginBottomTextBox = uiHelpers.createTextBox('Margin bottom', 'marginBottom', 65)%0A  var marginBottomUnitSelect = uiHelpers.createUnitSelectBox('marginBottomUnit', 'mm')%0A%0A  var marginLeftTextBox = uiHelpers.createTextBox('Margin left', 'marginLeft', 65)%0A  var marginLeftUnitSelect = uiHelpers.createUnitSelectBox('marginLeftUnit', 'mm')%0A%0A  // paperSize fieldset form%0A  var form = uiHelpers.createForm(%5B%0A    marginTopTextBox, marginTopUnitSelect,%0A    marginRightTextBox, marginRightUnitSelect,%0A    marginBottomTextBox, marginBottomUnitSelect,%0A    marginLeftTextBox, marginLeftUnitSelect%0A  %5D, 2)%0A%0A  var fieldSet = uiHelpers.createFieldset('Margins', %5Bform%5D, 460)%0A%0A  // tab%0A  var tab = uiHelpers.createTab('Page Margins', %5BfieldSet%5D)%0A%0A  return tab%0A%7D%0A

implement createMarginsTab()