import {groupByKeys} from "./staticData"
import {getTextWidth, isEqualKeyValue} from "./helpers"

const viewGraphicsPieBar = (chartId, period = '', countMachines, title, windowConfig, isOpenMenu = false, type) => {

  const elements = []
  const elementsMenu = []

  const elPeriod = period ? {id: 'period', name: 'Период загрузки данных', type: 'text', right: windowConfig?.pie?.graphic?.period?.right, top: windowConfig?.pie?.graphic?.period?.top, z: 999, style: {text: period, fill: '#777', fontSize: windowConfig?.pie?.graphic?.period?.fontSize}} : ''

  elements.push(elPeriod)

  const elCount = {id: 'count', type: 'text', left: windowConfig?.pie?.graphic?.count?.left, top: windowConfig?.pie?.graphic?.count?.top, z: 999, style: {text: countMachines, textAlign: 'center', fontSize: windowConfig?.pie?.graphic?.count?.fontSize}}

  !chartId.includes('bar') ? elements.push(elCount) : ''

  const elMenu = {id: 'menu', info: {typeEl: 'menu', chartId: chartId, type: type}, type: 'image', right: windowConfig?.bar?.graphic?.menu?.right, top: windowConfig?.bar?.graphic?.menu?.top, z: 999, style: {image: '/images/charts-more-vertical.svg', width: 17, height: 17}}

  elements.push(elMenu)

  const elRect = {id: 'rect', info: {typeEl: 'rect'}, type: 'rect', right: windowConfig?.bar?.graphic?.rect?.right, top: windowConfig?.bar?.graphic?.rect?.top, z: 999, shape: {width: 90, height: 40, r: [5]}, style: {fill: '#eee', shadowBlur: 8, shadowOffsetX: 3, shadowOffsetY: 3, shadowColor: 'rgba(0,0,0,0.3)'}}

  const elDownload = {id: 'download', info: {typeEl: 'download', title: title, countCharts: countMachines, chartId: chartId, type: type}, type: 'image', right: windowConfig?.bar?.graphic?.download?.right, top: windowConfig?.bar?.graphic?.download?.top, z: 999, style: {image: '/images/charts-download.svg', width: 17, height: 17}}

  const elDownloadTitle = {id: 'downloadTitle', info: {typeEl: 'downloadTitle', title: title, countCharts: countMachines, chartId: chartId, type: type}, type: 'text', right: windowConfig?.bar?.graphic?.downloadTitle?.right, top: windowConfig?.bar?.graphic?.downloadTitle?.top, z: 999, style: {text: 'Скачать', fontSize: 12}}
  
  elementsMenu.push(elRect)
  elementsMenu.push(elDownload)
  elementsMenu.push(elDownloadTitle)

  const menuContainer = {id: 'menuContainer', type: 'group', bounding: 'raw', right: windowConfig?.bar?.graphic?.container?.right, top: windowConfig?.bar?.graphic?.container?.top, z: 9999, children: elementsMenu, style: {}}
  
  isOpenMenu ? elements.push(menuContainer) : ''

  return elements
}

const viewGraphicsTypesBar = (chartId, title, groupByKey, prevGroupByData, filterKey, prevGroupByFilters, type, groupByValue, period, countCharts, windowConfig, isOpenMenu = false) => {

  const elements = []
  const elementsMenu = []

  const elPeriod = {id: 'period', name: 'Период загрузки данных', type: 'text', right: windowConfig?.bar?.graphic?.period?.right, top: windowConfig?.bar?.graphic?.period?.top, z: 999, style: {text: period, fill: '#777', fontSize: windowConfig?.pie?.graphic?.period?.fontSize}}

  elements.push(elPeriod)

  const elMenu = {id: 'menu', info: {typeEl: 'menu', chartId: chartId, groupByKey: groupByKey, filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'image', right: windowConfig?.bar?.graphic?.menu?.right, top: windowConfig?.bar?.graphic?.menu?.top, z: 999, style: {image: '/images/charts-more-vertical.svg', width: 17, height: 17}}

  elements.push(elMenu)

  const elRect = {id: 'rect', info: {typeEl: 'rect'}, type: 'rect', right: windowConfig?.bar?.graphic?.rect?.right, top: windowConfig?.bar?.graphic?.rect?.top, z: 999, shape: {width: 90, height: 40, r: [5]}, style: {fill: '#eee', shadowBlur: 8, shadowOffsetX: 3, shadowOffsetY: 3, shadowColor: 'rgba(0,0,0,0.3)'}}

  const elDownload = {id: 'download', info: {typeEl: 'download', title: title, countCharts: countCharts, chartId: chartId, groupByKey: groupByKey, filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'image', right: windowConfig?.bar?.graphic?.download?.right, top: windowConfig?.bar?.graphic?.download?.top, z: 999, style: {image: '/images/charts-download.svg', width: 17, height: 17}}

  const elDownloadTitle = {id: 'downloadTitle', info: {typeEl: 'downloadTitle', title: title, countCharts: countCharts, chartId: chartId, groupByKey: groupByKey, filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', right: windowConfig?.bar?.graphic?.downloadTitle?.right, top: windowConfig?.bar?.graphic?.downloadTitle?.top, z: 999, style: {text: 'Скачать', fontSize: 12}}
  
  elementsMenu.push(elRect)
  elementsMenu.push(elDownload)
  elementsMenu.push(elDownloadTitle)

  const menuContainer = {id: 'menuContainer', type: 'group', bounding: 'raw', right: windowConfig?.bar?.graphic?.container?.right, top: windowConfig?.bar?.graphic?.container?.top, z: 9999, children: elementsMenu, style: {}}
  
  isOpenMenu ? elements.push(menuContainer) : ''

  if(groupByKey !== groupByKeys.firstLayout && !isEqualKeyValue(prevGroupByData, groupByKeys.firstLayout, null)) {

       const buttonPrevious = {id: `${filterKey}`, info: {typeEl: 'buttonPrevious', prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'image', right: windowConfig?.bar?.graphic?.back?.right, top: windowConfig?.bar?.graphic?.back?.top, z: 999, style: {image: '/images/arrow-go-back-line.svg', width: 17, height: 17}}

       elements.push(buttonPrevious)
  }
            const elMain = {id: '', info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: 'Главная', fontSize: 10}}
            const notFirstLayout = !Object.keys(prevGroupByFilters).includes(groupByKeys.firstLayout)

       for (const groupByFilter in prevGroupByFilters) {
            if (groupByFilter === groupByKeys.firstLayout) {
                 const linkTitle = `/ ${prevGroupByFilters[groupByKeys.firstLayout]}`
                 const leftPos = getTextWidth('Главная ', 10)
                 elMain.id = `0:link_${groupByFilter}-${linkTitle}`
                 elements.push(elMain)
                 const paramsFirst = {id: `1:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
                 elements.push(paramsFirst)
            }
            if (groupByFilter === groupByKeys.secondLayout) {
                 const linkTitle = ` / ${prevGroupByFilters[groupByKeys.secondLayout]}`
                 const leftPos = getTextWidth(notFirstLayout ? 'Главная ' : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]}`, 10)
                 if(notFirstLayout) {
                      elMain.id = `0:link_${groupByFilter}-${linkTitle}`
                      elements.push(elMain)
                 }
                 const paramsSecond = {id: `2:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
                 elements.push(paramsSecond)
            }
            if (groupByFilter === groupByKeys.thirdLayout) {
                 const linkTitle = ` / ${prevGroupByFilters[groupByKeys.thirdLayout]}`
                 const leftPos = getTextWidth(notFirstLayout ? `Главная / ${prevGroupByFilters[groupByKeys.secondLayout]} ` : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]} / ${prevGroupByFilters[groupByKeys.secondLayout]}`, 10)
                 const paramsThird = {id: `3:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
                 elements.push(paramsThird)
            }
            if (groupByFilter === groupByKeys.fourthLayout) {
                 const linkTitle = ` / ${prevGroupByFilters[groupByKeys.fourthLayout]}`
                 const leftPos = getTextWidth(notFirstLayout ? `Главная / ${prevGroupByFilters[groupByKeys.secondLayout]} / ${prevGroupByFilters[groupByKeys.thirdLayout]} ` : `Главная / ${prevGroupByFilters[groupByKeys.firstLayout]} / ${prevGroupByFilters[groupByKeys.secondLayout]} / ${prevGroupByFilters[groupByKeys.thirdLayout]}`, 10)
                 const paramsFourth = {id: `4:link_${groupByFilter}-${linkTitle}`, info: {typeEl: 'link', filterKey: filterKey, prevGroupByData: prevGroupByData, prevGroupByFilters: prevGroupByFilters, type: type, groupByValue: groupByValue}, type: 'text', left: leftPos + windowConfig?.bar?.graphic?.link?.left, top: windowConfig?.bar?.graphic?.link?.top, z: 999, style: {text: linkTitle, fontSize: 10}}
                 elements.push(paramsFourth)
            }
       }

  return elements
}

export {viewGraphicsPieBar, viewGraphicsTypesBar}