const axisBarConfig = (typeChart, axisData, windowConfig, names = {}) => {
     return typeChart === 'mount' || typeChart === 'mainMl' || typeChart === 'states' || typeChart === 'packLines' ? {
          xAxis: {
               type: 'category',
               name: names.xAxis ? names.xAxis : '',
               nameLocation: 'end',
               nameGap: 35,
               nameTextStyle: {
                    verticalAlign: 'top',
                    align: 'right',
                    padding: typeChart === 'packLines' ? windowConfig?.linesPack.nameXAxis.padding : [25, 40, 0, 0]
               },
               splitLine: {show: true},
               axisLabel: {
                    show: true,
                    color: 'black',
                    fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
                    fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
                    interval: windowConfig?.bar?.xAxis?.label?.interval,
                    align: windowConfig?.bar?.xAxis?.label?.align,
                    hideOverlap: true,
                  },
               axisTick: {
                    show: true,
                    interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
                    lineStyle: {
                         color: 'black',
                    }
               },   
               data: axisData
               },
          yAxis: {
               type: 'value',
               name: names.xAxis ? names.xAxis : '',
               // nameLocation: 'end',
               // nameGap: 35,
               // nameTextStyle: {
               //      // verticalAlign: 'top',
               //      // align: 'right',
               //      padding: [125, 0, 0, 150]
               // },
               splitLine: {show: true},
               axisLine: {
                    show: true,
                    lineStyle: {
                    //   dashOffset: 10,   
                      width: 1,
                      color: 'white',
                      shadowColor: 'black',
                      shadowOffsetX: -2
                    },
               },
               axisLabel: {
                    show: true,
                    color: 'black',
                  },
               axisTick: {
                    show: true,
                    lineStyle: {   
                      color: 'black'
                    }
               },
          },
     } : {
          xAxis: {
               type: 'value',
               name: names.xAxis ? names.xAxis : '',
               splitLine: {show: true},
               axisLabel: {
                    show: true,
                    color: 'black',
                    fontSize: windowConfig?.bar?.xAxis?.label?.fontSize,
                    fontWeight: windowConfig?.bar?.xAxis?.label?.fontWeight,
                    interval: windowConfig?.bar?.xAxis?.label?.interval,
                    align: windowConfig?.bar?.xAxis?.label?.align,
                    hideOverlap: true,
                  },
               axisLine: {
                    show: true,
                    lineStyle: {   
                         color: 'black',
                    }
                    },
               axisTick: {
                    show: true,
                    interval: windowConfig?.bar?.xAxis?.axisTick?.interval,
                    lineStyle: {   
                         color: 'black'
                    }
               },
               minInterval: 1,
               },
          yAxis: {
               type: 'category',
               name: names.yAxis ? names.yAxis : '',
               axisLine: {
                    show: true,
                    lineStyle: {
                    //   dashOffset: 10,   
                      width: 1,
                      color: 'white',
                      shadowColor: 'black',
                      shadowOffsetX: -2
                    },
               },
               // axisLabel: {
               //      formatter: (yAxisData) => {
               //           // return yAxisData.map((el) => {
               //           //      return `${el?.name} ${el?.value}`
               //           // })
               //    }
               // },
               axisLabel: {
                    show: true,
                    width: windowConfig?.bar?.yAxis?.label?.width,
                    color: 'black',
                    fontSize: windowConfig?.bar?.yAxis?.label?.fontSize,
                    fontWeight: windowConfig?.bar?.yAxis?.label?.fontWeight,
                    overflow: 'break',
                  },
               axisTick: {
                    show: true,
                    lineStyle: {   
                      color: 'black'
                    }
               },
               // fontSize: 10,
               // offset: -7,
               data: axisData,
               splitLine: {
                    show: true
                  },
               // position: windowConfig?.bar?.yAxis?.label?.position,
               // offset: windowConfig?.bar?.yAxis?.label?.offset,
               zLevel: 3,
               // z: 99
          },
     }
}

const windowConfig = (isMobile, currentWidth, countCharts) => {

     const scrollbarParams = (countCharts) => {
          if(15 < countCharts && countCharts < 40) return {
               start: 85, minSpan: 5
          }
          if(40 < countCharts && countCharts < 70) return {
               start: 90, minSpan: 5
          }
          if(70 < countCharts && countCharts < 100) return {
               start: 95, minSpan: 5
          }
          if(100 < countCharts) return {
               start: 99, minSpan: 3
          }
          return {start: 70, minSpan: 5}

     }

     if(isMobile) return {
          title: {
               width: currentWidth - 90,
               top: 3,
               left: 'left',
               fontSize: 11,
          },
          backgroundColor: '#FFF',
          pie: {
               legend: {
                    itemWidth: 15,
                    itemHeight: 15,
                    itemGap: 5,
                    fontSize: 10
               },
               graphic: {
                    period: {
                         top: 10,
                         right: 40,
                         fontSize: 10
                    },
                    count: {
                         top: 'center',
                         left: 'center',
                         fontSize: 20
                    },
               }
          },
          linesPack: {
               legend: {
                    bottom: 0,
                    itemWidth: 25,
                    itemHeight: 14,
                    itemGap: 7,
                    fontSize: 11
               },
               nameXAxis: {
                    padding: [110, 40, 0, 0],
               }
          },     
          bar: {
               legend: {
                    bottom: 0,
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 5,
                    fontSize: 10
               },
               grid: {
                    width: '85%',
                    top: 40
               },
               yAxis: {
                    label: {width: 40, fontWeight: 'bold', fontSize: 9, position: 'left', offset: -20}
               },
               xAxis: {
                    label: {fontSize: 10, fontWeight: 'bold', interval: 1, align: 'center'},
                    axisTick: {interval: 1}
               },
               dataZoom: {
                    top: 40,
                    start: scrollbarParams(countCharts).start,
                    minSpan: scrollbarParams(countCharts).minSpan,
               },
               graphic: {
                    period: {
                         top: 8,
                         right: 50,
                         fontSize: 10
                    },
                    menu: {
                         top: 5,
                         right: 0
                    },
                    container: {
                         top: 27,
                         right: 0
                    },
                    rect: {
                         top: 8,
                         right: 10
                    },
                    download: {
                         top: 18,
                         right: 70
                    },
                    downloadTitle: {
                         top: 23,
                         right: 20
                    },
                    back: {
                         top: 5,
                         right: 20,
                    },
                    link: {
                         top: 23,
                         left: 7,
                    }
               }
          }
     }
     if(!isMobile) return {
          title: {
               width: 'auto',
               top: 3,
               left: 'left',
               fontSize: 16,
          },
          backgroundColor: '#FFF',
          line: {
               legend: {
                    bottom: 0,
                    itemWidth: 25,
                    itemHeight: 14,
                    itemGap: 7,
                    fontSize: 11
               },
          },     
          linesPack: {
               legend: {
                    bottom: 0,
                    itemWidth: 25,
                    itemHeight: 14,
                    itemGap: 7,
                    fontSize: 11
               },
               nameXAxis: {
                    padding: [110, 40, 0, 0],
               }
          },     
          pie: {
               legend: {
                    itemWidth: 15,
                    itemHeight: 15,
                    itemGap: 10,
                    fontSize: 12
               },
               graphic: {
                    period: {
                         top: 10,
                         right: 30,
                         fontSize: 12
                    },
                    count: {
                         top: 'center',
                         left: 'center',
                         fontSize: 27
                    },
               }
          },
          bar: {
               legend: {
                    bottom: 10,
                    itemWidth: 25,
                    itemHeight: 14,
                    itemGap: 10,
                    fontSize: 12
               },
               grid: {
                    width: '90%',
                    top: 50
               },
               yAxis: {
                    label: {fontSize: 13, width: 110, fontWeight: 'normal', position: 'left', offset: 0}
                    
               },
               xAxis: {
                    label: {fontSize: 10, fontWeight: 'normal', interval: 1, align: 'center'}, 
                    axisTick: {interval: 0}
               },
               dataZoom: {
                    top: 50,
                    start: scrollbarParams(countCharts).start,
                    minSpan: scrollbarParams(countCharts).minSpan,
               },
               graphic: { 
                    period: {
                         top: 10,
                         right: 60,
                         fontSize: 12
                    },
                    menu: {
                         top: 7,
                         right: 5
                    },
                    container: {
                         top: 27,
                         right: 0
                    },
                    rect: {
                         top: 8,
                         right: 10
                    },
                    download: {
                         top: 18,
                         right: 70
                    },
                    downloadTitle: {
                         top: 23,
                         right: 20
                    },
                    back: {
                         top: 7,
                         right: 30,
                    },
                    link: {
                         top: 28,
                         left: 7,
                    }
               }
          }
     }
}

const sizeOptions = (width = 600, height = 400) => {
     return {
          width: width,
          height: height
     }
   }

export {axisBarConfig, windowConfig, sizeOptions}   