content: /* eslint-disable react/prop-types, no-mixed-operators, react/jsx-space-before-closing, spaced-comment, arrow-body-style, react/jsx-first-prop-new-line, react/jsx-indent-props, quotes, react/jsx-closing-bracket-location, react/jsx-wrap-multilines */
  import React from 'react';
  import _ from 'lodash';
  import styles from './styles.css';
  
  function getStyles(classRefs) {
    const classes = [];
    classRefs.split(' ').forEach((className) => {
      classes.push(styles[className]);
    });
    return classes.join(' ');
  }
  
  function getYPosition(max, height, chartHeight, value) {
    return (height - (chartHeight / max) * value) - 40;
  }
  
  function getXPosition(index, block) {
    return (index * block);
  }
  
  function getHoverPath(index, data, block, max, height, chartHeight) {
    const dataSet = _.clone(data).slice(0, index + 1);
    const Y = _.map(dataSet, (item, i) => {
      return `${getXPosition(i, block)} ${getYPosition(max, height, chartHeight, item)}`;
    });
    return `M${Y.join(',')}`;
  }
  
  function LineChart(props) {
    let mainContent = <span> data not available </span>;
    let data = [];
    let startingYear = (new Date()).getFullYear();
    let midYear = startingYear;
    let endYear = startingYear;
  
    if (props.data !== 'no data') {
      if (typeof props.data[0] === 'object') {
        props.data.forEach((item) => {
          data.push(item.value);
        });
        startingYear = props.data[0].period;
        midYear = props.data[Math.ceil((data.length - 1) / 2)].period;
        endYear = props.data[data.length - 1].period;
      } else {
        data = props.data;
        midYear = Math.ceil(startingYear + data.length / 2);
        endYear = startingYear + data.length;
      }
      const width = window.innerWidth - 40;
      const height = 200;
      const chartHeight = height - 80;
      const max = _.max(data);
      const block = width / (data.length - 1);
      const labelOffset = 36;
  
      const Y = _.map(data, (item, index) => {
        return `${getXPosition(index, block)} ${getYPosition(max, height, chartHeight, item)}`;
      });
  
      const path = `M${Y.join(',')}`;
  
      mainContent = (
        <section>
          <svg width={width}
               height={height}
               xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="GRAD">
                <stop stopColor="rgb(11, 241, 210)"/>
                <stop offset="100%" stopColor="rgb(79, 210,244)"/>
              </linearGradient>
            </defs>
            <filter id="dropshadow" height="150%">
              <feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3"/>
              <feOffset dx="0" dy="4" result="offsetblur"/>
              <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
            <path className={styles.line} d={path}/>
  
            {data.map((value, index) => {
              return (<g className={styles.value} key={index}>
                <circle className={styles.point_ghost} cx={index * block}
                        cy={getYPosition(max, height, chartHeight, value)}
                        r={20}
                />
                <path className={getStyles("line_hover")} d={getHoverPath(index, data, block, max, height, chartHeight)} stroke="url(#GRAD)"
                      strokeLinecap="round"/>
                <g className={styles.tooltip}
                   transform={`translate(${((index * block) - 53)}, ${(getYPosition(max, height, chartHeight, value) - 60)})`}>
                  <circle cx="50"
                          cy="60"
                          r="24"
                          fill="rgba(255, 255, 255, 0.2)"
                  />
                  <circle className={styles.point_dot} cx="50"
                          cy="60"
                          r="14"
                  />
                  <rect x="0"
                        y="0"
                        width="100"
                        height="40"
                        rx="3" ry="3"
                        className={styles.label_container}
                        style={{ filter: "url(#dropshadow)" }}
                  />
                  <text className={styles.label} x="5" y="16">
                    {/*{`R$ ${_.round(value, 2)}`}*/}
                    R$ {value.toLocaleString(props.locale, { minimumFractionDigits: 2 })}
                  </text>
                  <text className={styles.label} x="5" y="32">
                    {`${startingYear + index}`}
                  </text>
                </g>
              </g>);
            })}
            <text className={getStyles("xLabel")} x={10} y={height - 10}>{startingYear}</text>
            <text className={getStyles("xLabel")} x={width / 2 - labelOffset / 2}
                  y={height - 10}>{midYear}</text>
            <text className={getStyles("xLabel")} x={width - labelOffset}
                  y={height - 10}>{endYear}</text>
          </svg>
        </section>);
    }
  
    return (
      <div>
        { mainContent }
      </div>
    );
  }
  
  LineChart.propTypes = {
    locale: React.PropTypes.string,
    data: React.PropTypes.oneOfType([
      React.PropTypes.array,
      React.PropTypes.string,
    ]),
  };
  
  export default LineChart;
  