/**
 * theme util
 *
 * 无法设置geom的配置项
 *
 * https://github.com/antvis/g2/blob/master/src/theme/default.js
 * https://github.com/antvis/g2/blob/master/src/theme/dark.js
 */

import chartVariable from './chartVariable';

const bizchartsThemeBuild = designToken => {
  const RESULT = chartVariable(designToken);

  // tooltip 相关 dom 的 css 类名
  const TOOLTIP_CONTAINER_CLASS = 'g2-tooltip';
  const TOOLTIP_TITLE_CLASS = 'g2-tooltip-title';
  const TOOLTIP_LIST_CLASS = 'g2-tooltip-list';
  const TOOLTIP_LIST_ITEM_CLASS = 'g2-tooltip-list-item';
  const TOOLTIP_MARKER_CLASS = 'g2-tooltip-marker';
  const TOOLTIP_VALUE_CLASS = 'g2-tooltip-value';

  // html 渲染的 legend 相关 dom 的 css 类型
  const LEGEND_CONTAINER_CLASS = 'g2-legend';
  const LEGEND_TITLE_CLASS = 'g2-legend-title';
  const LEGEND_LIST_CLASS = 'g2-legend-list';
  const LEGEND_LIST_ITEM_CLASS = 'g2-legend-list-item';
  const LEGEND_MARKER_CLASS = 'g2-legend-marker';

  const chartTheme = {
    /**
     * chartBox 非g2内置
     */
    chartBox: {
      paddingLeft: RESULT.FONT_SIZE_TITLE * 1.5,
      paddingRight: RESULT.FONT_SIZE_TITLE * 1.5,
      paddingTop: RESULT.FONT_SIZE_TITLE * 1.2,
      paddingBottom: RESULT.FONT_SIZE_TITLE * 1.2,
      backgroundColor: RESULT.COLOR_BG
    },
    /**
     * title 非g2内置
     */
    title: {
      color: RESULT.COLOR_TITLE,
      fontFamily: RESULT.FONT_FAMILY,
      fontSize: RESULT.FONT_SIZE_TITLE,
      fontWeight: RESULT.FONT_WEIGHT_BOLD,
      paddingBottom: 1.5,
      display: 'block',
      textIndent: '12px'
    },
    /**
     * subTitle 非g2内置
     */
    subTitle: {
      color: RESULT.COLOR_SUBTITLE,
      fontFamily: RESULT.FONT_FAMILY,
      fontSize: RESULT.FONT_SIZE_SUBTITLE,
      fontWeight: RESULT.FONT_WEIGHT_NORMAL,
      display: 'block',
      textIndent: '12px'
    },

    fontFamily: RESULT.FONT_FAMILY,
    defaultColor: RESULT.COLOR_BRAND,
    plotCfg: {
      padding: [20, 20, 95, 80]
    },
    // defaultLegendPosition: 'bottom', // 默认图例的展示位置
    colors: RESULT.COLORS_8,
    colors_16: RESULT.COLORS_8,
    colors_24: RESULT.COLORS_8,
    colors_pie: RESULT.COLORS_8,
    colors_pie_16: RESULT.COLORS_8,

    // shapes: {
    //   point: [ 'hollowCircle', 'hollowSquare', 'hollowDiamond', 'hollowBowtie', 'hollowTriangle',
    //     'hollowHexagon', 'cross', 'tick', 'plus', 'hyphen', 'line' ],
    //   line: [ 'line', 'dash', 'dot' ],
    //   area: [ 'area' ]
    // },
    // sizes: [ 1, 10 ],
    // opacities: [ 0.1, 0.9 ],

    background: {
      fill: RESULT.COLOR_BG,
      fillOpacity: 1, // 图表背景透明度
      stroke: RESULT.COLOR_BG, // 图表边框颜色
      strokeOpacity: 1, // 图表边框透明度
      opacity: 1, // 图表整体透明度
      lineWidth: 20, // 图表边框粗度
      radius: 0 // 图表圆角大小
    },
    plotBackground: {
      fill: RESULT.COLOR_BG
    },
    axis: {
      top: {
        // position: 'top',
        title: {
          // autoRotate: false, // 是否需要自动旋转，默认为 true
          // offset: 10, // 数值，设置坐标轴标题距离坐标轴线的距离
          // 设置标题的文本样式
          textStyle: {
            // textAlign: 'center', // 文本对齐方向，可取值为： start middle end
            fill: RESULT.COLOR_AXIS_TITLE // 文本的颜色
            // fontSize: '12', // 文本大小
            // fontWeight: 'bold', // 文本粗细
            // rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
            // textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
          }
          // position: 'center' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
        },
        label: {
          // offset: 16,
          textStyle: {
            fill: RESULT.COLOR_LABEL,
            fontSize: RESULT.FONT_SIZE,
            // lineHeight: 16,
            // textBaseline: 'middle',
            fontFamily: RESULT.FONT_FAMILY
          },
          autoRotate: true
        },
        line: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE,
          strokeOpacity: 1
        },
        tickLine: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_TICKLINE
          // length: 4,
          // alignWithLabel: true
        }
      },
      bottom: {
        // position: 'bottom',
        title: {
          // autoRotate: false, // 是否需要自动旋转，默认为 true
          // offset: 10, // 数值，设置坐标轴标题距离坐标轴线的距离
          // 设置标题的文本样式
          textStyle: {
            // textAlign: 'center', // 文本对齐方向，可取值为： start middle end
            fill: RESULT.COLOR_AXIS_TITLE // 文本的颜色
            // fontSize: '12', // 文本大小
            // fontWeight: 'bold', // 文本粗细
            // rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
            // textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
          }
          // position: 'center' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
        },
        label: {
          // offset: 16,
          // autoRotate: false,
          textStyle: {
            fill: RESULT.COLOR_LABEL,
            fontSize: RESULT.FONT_SIZE,
            // lineHeight: 16,
            // textBaseline: 'middle',
            // rotate: 0,
            fontFamily: RESULT.FONT_FAMILY
          }
        },
        line: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE
        },
        tickLine: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_TICKLINE
          // length: 4,
          // alignWithLabel: true
        }
      },
      left: {
        // position: 'left',
        title: {
          // autoRotate: false, // 是否需要自动旋转，默认为 true
          // offset: 10, // 数值，设置坐标轴标题距离坐标轴线的距离
          // 设置标题的文本样式
          textStyle: {
            // textAlign: 'center', // 文本对齐方向，可取值为： start middle end
            fill: RESULT.COLOR_AXIS_TITLE // 文本的颜色
            // fontSize: '12', // 文本大小
            // fontWeight: 'bold', // 文本粗细
            // rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
            // textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
          }
          // position: 'center' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
        },
        label: {
          // offset: 8,
          // autoRotate: true,
          textStyle: {
            fill: RESULT.COLOR_LABEL,
            fontSize: RESULT.FONT_SIZE,
            // lineHeight: 16,
            // textBaseline: 'middle',
            fontFamily: RESULT.FONT_FAMILY
          }
        },
        line: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE
        },
        tickLine: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_TICKLINE
          // length: 4,
          // alignWithLabel: true
        },
        grid: {
          // zIndex: -1,
          lineStyle: {
            stroke: RESULT.COLOR_GRID
            // lineWidth: 1,
            // lineDash: [3, 3]
          }
          // hideFirstLine: true
        }
      },
      right: {
        // position: 'right',
        title: {
          // autoRotate: false, // 是否需要自动旋转，默认为 true
          // offset: 10, // 数值，设置坐标轴标题距离坐标轴线的距离
          // 设置标题的文本样式
          textStyle: {
            // textAlign: 'center', // 文本对齐方向，可取值为： start middle end
            fill: RESULT.COLOR_AXIS_TITLE // 文本的颜色
            // fontSize: '12', // 文本大小
            // fontWeight: 'bold', // 文本粗细
            // rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
            // textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
          }
          // position: 'center' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
        },
        label: {
          // offset: 8,
          // autoRotate: false,
          textStyle: {
            fill: RESULT.COLOR_LABEL,
            fontSize: RESULT.FONT_SIZE,
            // lineHeight: 16,
            // textBaseline: 'middle',
            fontFamily: RESULT.FONT_FAMILY
          }
        },
        // line: null,
        // tickLine: null,
        grid: {
          lineStyle: {
            stroke: RESULT.COLOR_GRID
            // lineWidth: 1,
            // lineDash: [ 3, 3 ]
          }
          // hideFirstLine: true
        }
      },
      circle: {
        // zIndex: 1,
        // title: null,
        label: {
          // offset: 8,
          textStyle: {
            fill: RESULT.COLOR_LABEL,
            fontSize: RESULT.FONT_SIZE,
            // lineHeight: 16,
            fontFamily: RESULT.FONT_FAMILY
          }
        },
        line: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE
        },
        tickLine: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE
          // length: 4,
          // alignWithLabel: true
        },
        grid: {
          lineStyle: {
            stroke: RESULT.COLOR_GRID
            // lineWidth: 1,
            // lineDash: [ 3, 3 ]
          }
          // hideFirstLine: true
        }
      },
      radius: {
        // zIndex: 0,
        label: {
          // offset: 12,
          textStyle: {
            fill: RESULT.COLOR_LABEL,
            fontSize: RESULT.FONT_SIZE,
            // textBaseline: 'middle',
            // lineHeight: 16,
            fontFamily: RESULT.FONT_FAMILY
          }
        },
        line: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE
        },
        tickLine: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE
          // length: 4,
          // alignWithLabel: true
        },
        grid: {
          lineStyle: {
            stroke: RESULT.COLOR_GRID
            // lineWidth: 1,
            // lineDash: [ 3, 3 ]
          }
          // type: 'circle'
        }
      },
      // 螺旋
      helix: {
        // grid: null,
        // label: null,
        // title: null,

        line: {
          // lineWidth: 1,
          stroke: RESULT.COLOR_AXIS_LINE
        },
        tickLine: {
          // lineWidth: 1,
          // length: 4,
          stroke: RESULT.COLOR_AXIS_LINE
          // alignWithLabel: true
        }
      }
    },
    label: {
      // offset: 20,
      textStyle: {
        fill: RESULT.COLOR_GUIDE,
        fontSize: RESULT.FONT_SIZE,
        // textBaseline: 'middle',
        fontFamily: RESULT.FONT_FAMILY
      }
    },
    treemapLabels: {
      // offset: 10,
      textStyle: {
        fill: RESULT.COLOR_LABEL,
        fontSize: RESULT.FONT_SIZE,
        // textBaseline: 'top',
        // fontStyle: 'bold',
        fontFamily: RESULT.FONT_FAMILY
      }
    },

    // 饼图用到innerLabels
    innerLabels: {
      textStyle: {
        fill: RESULT.COLOR_GUIDE,
        fontSize: RESULT.FONT_SIZE,
        // textBaseline: 'middle',
        fontFamily: RESULT.FONT_FAMILY
      }
    },
    // 在theta坐标系下的饼图文本内部的样式
    thetaLabels: {
      textStyle: {
        fill: RESULT.COLOR_GUIDE,
        fontFamily: RESULT.FONT_FAMILY,
        fontSize: RESULT.FONT_SIZE
      }
      // labelLine: {
      //   lineWidth: 1
      // },
      // labelHeight: 14,
      // offset: 30
      // 在theta坐标系下的饼图文本的样式
    },
    legend: {
      right: {
        // position: 'right',
        // layout: 'vertical',
        // itemMarginBottom: 8, // layout 为 vertical 时各个图例项的间距
        // width: 16,
        // height: 156,
        // title: null,
        // legendStyle: {
        //   LIST_CLASS: {
        //     textAlign: 'left'
        //   }
        // },
        textStyle: {
          // 图例项文本的样式
          fill: RESULT.COLOR_LEGEND,
          fontSize: RESULT.FONT_SIZE_LEGEND,
          // textAlign: 'start',
          // textBaseline: 'middle',
          // lineHeight: 0,
          fontFamily: RESULT.FONT_FAMILY
        },
        unCheckColor: RESULT.COLOR_UNCHECKED
      },
      left: {
        // position: 'left',
        // layout: 'vertical',
        // itemMarginBottom: 8,
        // width: 16,
        // height: 156,
        // title: null,
        textStyle: {
          fill: RESULT.COLOR_LEGEND,
          fontSize: RESULT.FONT_SIZE,
          // textAlign: 'start',
          // textBaseline: 'middle',
          // lineHeight: 20,
          fontFamily: RESULT.FONT_FAMILY
        },
        unCheckColor: RESULT.COLOR_UNCHECKED
      },
      top: {
        // position: 'top',
        // offset: [0, 6],
        // layout: 'horizontal',
        // title: null,
        // itemGap: 10,
        // width: 156,
        // height: 16,
        textStyle: {
          fill: RESULT.COLOR_LEGEND,
          fontSize: RESULT.FONT_SIZE,
          // textAlign: 'start',
          // textBaseline: 'middle',
          // lineHeight: 20,
          fontFamily: RESULT.FONT_FAMILY
        },
        unCheckColor: RESULT.COLOR_UNCHECKED
      },
      bottom: {
        // position: 'bottom',
        // offset: [0, 6],
        // layout: 'horizontal',
        // title: null,
        // itemGap: 10,
        // width: 156,
        // height: 16,
        textStyle: {
          fill: RESULT.COLOR_LEGEND,
          fontSize: RESULT.FONT_SIZE,
          // textAlign: 'start',
          // textBaseline: 'middle',
          // lineHeight: 20,
          fontFamily: RESULT.FONT_FAMILY
        },
        unCheckColor: RESULT.COLOR_UNCHECKED
      },
      // 定义 html 渲染图例的样式
      html: {
        [`${LEGEND_CONTAINER_CLASS}`]: {
          // height: 'auto',
          // width: 'auto',
          // position: 'absolute',
          // overflow: 'auto',
          fontSize: RESULT.FONT_SIZE,
          fontFamily: RESULT.FONT_FAMILY,
          // lineHeight: '20px',
          color: RESULT.COLOR_LEGEND
        },
        [`${LEGEND_TITLE_CLASS}`]: {
          // marginBottom: '4px'
        },
        [`${LEGEND_LIST_CLASS}`]: {
          // listStyleType: 'none',
          // margin: 0,
          // padding: 0
        },
        [`${LEGEND_LIST_ITEM_CLASS}`]: {
          // cursor: 'pointer',
          // marginBottom: '5px',
          // marginRight: '24px'
        },
        [`${LEGEND_MARKER_CLASS}`]: {
          // width: '9px',
          // height: '9px',
          // borderRadius: '50%',
          // display: 'inline-block',
          // marginRight: '8px',
          // verticalAlign: 'middle'
        }
      },
      // 渐变色图例，用于地图等
      gradient: {
        textStyle: {
          // 图例项文本的样式
          fill: RESULT.COLOR_BRAND,
          fontSize: RESULT.FONT_SIZE,
          // textAlign: 'center',
          // textBaseline: 'middle',
          // lineHeight: 20,
          fontFamily: RESULT.FONT_FAMILY
        },
        lineStyle: {
          stroke: RESULT.COLOR_BG
        },
        unCheckColor: RESULT.COLOR_UNCHECKED
      }
    },
    tooltip: {
      // useHtml: true,
      crosshairs: true, // 显示线
      // offset: 15,
      // css style for tooltip
      [`${TOOLTIP_CONTAINER_CLASS}`]: {
        // position: 'absolute',
        // visibility: 'hidden',
        // @2018-07-25 by blue.lb 这里去掉浮动，火狐上存在样式错位
        // whiteSpace: 'nowrap',
        // zIndex: 8,
        // transition:
        //   'visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1)',
        backgroundColor: RESULT.COLOR_TOOLTIP_BG,
        boxShadow: `0px 0px 2px ${RESULT.COLOR_TOOLTIP_SHADOW}`,
        // borderRadius: '3px',
        color: RESULT.COLOR_TOOLTIP_TITLE,
        fontSize: RESULT.FONT_SIZE,
        fontFamily: RESULT.FONT_FAMILY
        // lineHeight: '20px',
        // padding: '10px 10px 6px 10px'
      },
      [`${TOOLTIP_TITLE_CLASS}`]: {
        // marginBottom: '4px'
      },
      [`${TOOLTIP_LIST_CLASS}`]: {
        // margin: 0,
        // listStyleType: 'none',
        // padding: 0,
        color: RESULT.COLOR_TOOLTIP_LIST,
        fontSize: RESULT.FONT_SIZE_TOOLTIP_LIST
      },
      [`${TOOLTIP_LIST_ITEM_CLASS}`]: {
        // marginBottom: '4px'
      },
      [`${TOOLTIP_MARKER_CLASS}`]: {
        // width: '5px',
        // height: '5px',
        // borderRadius: '50%',
        // display: 'inline-block',
        // marginRight: '8px'
      },

      [`${TOOLTIP_VALUE_CLASS}`]: {
        // display: 'inline-block',
        // float: 'right',
        // marginLeft: '30px'
      }
    },
    tooltipMarker: {
      // symbol: (x, y, r) => {
      //   return [
      //     ['M', x, y],
      //     ['m', -r, 0],
      //     ['a', r, r, 0, 1, 0, r * 2, 0],
      //     ['a', r, r, 0, 1, 0, -r * 2, 0]
      //   ];
      // },
      // stroke: '#fff',
      // shadowBlur: 10,
      // shadowOffsetX: 0,
      // shadowOffSetY: 0,
      // shadowColor: 'rgba(0,0,0,0.09)',
      // lineWidth: 2,
      // radius: 4
    }, // 提示信息在折线图、区域图上形成点的样式
    tooltipCrosshairsRect: {
      type: 'rect',
      rectStyle: {
        fill: RESULT.COLOR_GRID,
        opacity: RESULT.COLOR_TOOLTIP_CROSSHAIR_OPACITY
      }
    },
    tooltipCrosshairsLine: {
      lineStyle: {
        stroke: RESULT.COLOR_TOOLTIP_CROSSHAIR_LINE,
        lineWidth: 10,
        opacity: RESULT.COLOR_TOOLTIP_CROSSHAIR_OPACITY
      }
    },
    shape: {
      point: {
        fill: RESULT.COLOR_BRAND,
        radius: 4,
        lineWidth: 1.5,
        stroke: RESULT.COLOR_BG
      },
      hollowPoint: {
        fill: RESULT.COLOR_BRAND,
        radius: 4,
        lineWidth: 1.5,
        stroke: RESULT.COLOR_BRAND
      },
      interval: {
        lineWidth: 0,
        fill: RESULT.COLOR_BRAND,
        fillOpacity: 1
      },
      hollowInterval: {
        fill: RESULT.COLOR_WHITE,
        stroke: RESULT.COLOR_BRAND,
        fillOpacity: 0,
        lineWidth: 2
      },
      area: {
        lineWidth: 0,
        fill: RESULT.COLOR_BRAND,
        fillOpacity: 0.6
      },
      // 多边形
      polygon: {
        lineWidth: 0,
        fill: RESULT.COLOR_BRAND,
        fillOpacity: 1
      },
      hollowPolygon: {
        fill: RESULT.COLOR_WHITE,
        stroke: RESULT.COLOR_BRAND,
        fillOpacity: 0,
        lineWidth: 2
      },
      hollowArea: {
        fill: RESULT.COLOR_WHITE,
        stroke: RESULT.COLOR_BRAND,
        fillOpacity: 0,
        lineWidth: 2
      },
      // line的fill必须配置为null，不能配置为任何数值，否则会触发G2渲染为整个path区域块； @fengyue 2018-11-14
      line: {
        stroke: RESULT.COLOR_BRAND,
        lineWidth: 2
      },
      edge: {
        stroke: RESULT.COLOR_BRAND,
        lineWidth: 1,
        fill: null
      },
      schema: {
        stroke: RESULT.COLOR_BRAND,
        lineWidth: 1,
        fill: null
      }
    },

    guide: {
      // 辅助线
      line: {
        lineStyle: {
          stroke: RESULT.COLOR_GUIDE_LINE
          // lineDash: [2, 2],
          // lineWidth: 1
        },
        text: {
          // position: 'start',
          // autoRotate: true,
          style: {
            fill: RESULT.COLOR_GUIDE,
            fontSize: RESULT.FONT_SIZE,
            // textAlign: 'start',
            fontFamily: RESULT.FONT_FAMILY
            // textBaseline: 'bottom'
          }
        }
      },
      // 辅助文本
      text: {
        style: {
          fill: RESULT.COLOR_WHITE,
          stroke: RESULT.COLOR_BRAND,
          fontSize: RESULT.FONT_SIZE,
          // textBaseline: 'middle',
          // textAlign: 'start',
          fontFamily: RESULT.FONT_FAMILY
        }
      },
      region: {
        style: {
          // lineWidth: 0, // 辅助框的边框宽度
          fill: RESULT.COLOR_GUIDE // 辅助框填充的颜色
          // fillOpacity: 0.04 // 辅助框的背景透明度
        } // 辅助框的图形样式属性
      },
      html: {
        // alignX: 'middle',
        // alignY: 'middle'
      },
      dataRegion: {
        style: {
          region: {
            // lineWidth: 0,
            fill: RESULT.COLOR_TOOLTIP_BG,
            opacity: 0.1
          },
          text: {
            // textAlign: 'center',
            // textBaseline: 'bottom',
            fontSize: RESULT.FONT_SIZE,
            fill: RESULT.COLOR_GUIDE
          }
        }
      },
      dataMarker: {
        // top: true,
        style: {
          point: {
            r: 5,
            fill: RESULT.COLOR_BRAND,
            stroke: RESULT.COLOR_BG,
            lineWidth: 2
          },
          line: {
            stroke: RESULT.COLOR_GUIDE_LINE,
            lineWidth: 1
          },
          text: {
            fill: RESULT.COLOR_GUIDE,
            // opacity: 1,
            fontSize: RESULT.FONT_SIZE
            // textAlign: 'start'
          }
        }
        // display: {
        //   point: true,
        //   line: true,
        //   text: true
        // },
        // lineLength: 20,
        // direction: 'upward',
        // autoAdjust: true
      }
    }
  };
  const themeBuild = {
    designtoken: designToken,
    chartVariable: RESULT,
    chartTheme
  };

  // console.log('themeBuild', themeBuild);

  return themeBuild;
};
export default bizchartsThemeBuild;