/* eslint func-names: "off" */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as d3 from 'd3';
import { withRouter } from 'react-router-dom';

import './RowChart.scss';


/**
 * TODO: As a first implementation we have chosen to delagate the barchart DOM drawing to D3.
 * This may not be the optimum solution. This may have to be rewrittten to use
 * React for elementt creation and D3 as the visualisation kernel.
 */
class RowChart extends Component {
  static propTypes = {
    data: PropTypes.PropTypes.arrayOf(PropTypes.object).isRequired,
    tagPrefix: PropTypes.string.isRequired,
    history: PropTypes.object.isRequired,
  }

  componentDidMount() {
    this.drawChart();
  }

  componentDidUpdate() {
    this.drawChart();
  }

  drawChart() {
    const { node } = this;
    const { data, tagPrefix } = this.props;

    const width = 800;
    const barHeight = 30;
    const height = barHeight * data.length;
    const valueMargin = 4;
    const yAxisHMargin = 10;
    const yAxisVMargin = 10;
    const barVMargin = 10;

    const y = d3.scaleBand()
      .rangeRound([0, height])
      .padding(0.1)
      .domain(data.map(d => d.tag));

    const yAxis = d3.axisLeft(y);

    d3.select(node).selectAll('svg').remove();
    const chart = d3.select(node)
      .append('svg')
      .attr('width', '100%');

    const barsContainer = chart.append('g')
      .attr('class', 'bars-container');

    const yAxisContainer = chart.append('g')
      .attr('class', 'y-axis axis')
      .call(yAxis);

    let yAxisWidth = 0;
    chart.selectAll('.y-axis text')
      .each(function () { yAxisWidth = Math.max(yAxisWidth, this.getBBox().width); });

    const x = d3.scaleLinear()
      .range([0, width - yAxisWidth - yAxisHMargin])
      .domain([0, d3.max(data, d => d.count)]);

    const xAxis = d3.axisBottom(x);

    const xAxisContainer = chart.append('g')
      .attr('class', 'y-axis axis')
      .attr('transform', `translate(${[yAxisWidth + 2 * yAxisHMargin, height + yAxisVMargin]})`)
      .call(xAxis);

    const bar = barsContainer.selectAll('.bars-container')
      .data(data)
      .enter().append('g')
      .attr('transform', (d, i) => `translate(0,${i * barHeight})`)
      .attr('class', 'graph-bar');

    bar.append('rect')
      .attr('width', d => x(d.count))
      .attr('height', barHeight - barVMargin)
      .attr('fill', d => d.color)
      .attr('stroke', d => d.color)
      .attr('transform', 'translate(0,5)')
      .on('click', (d) => {
        const { history } = this.props;
        history.push(`/annotations/${tagPrefix}${d.tag}`);
      });

    bar.append('text')
      .attr('y', barHeight / 2)
      .attr('dy', '.35em')
      .attr('dx', -valueMargin)
      .attr('text-anchor', 'end')
      .text(d => d.count)
      .attr('x', function (d) {
        const xWidth = this.getBBox().width;
        return Math.max(xWidth + valueMargin, x(d.count));
      });

    yAxisContainer.attr('transform', `translate(${yAxisWidth + yAxisHMargin},0)`);
    barsContainer.attr('transform', `translate(${yAxisWidth + 2 * yAxisHMargin},0)`);

    const totalHeight = height + xAxisContainer.node().getBBox().height + yAxisVMargin;
    const totalWidth = width + 2 * yAxisHMargin;

    chart.attr('viewBox', [0, 0, totalWidth, totalHeight].join(' '));
  }

  render() {
    return (
      <div className="row chart-container">
        <div className="col col-12" ref={(elt) => { this.node = elt; }} />
      </div>
    );
  }
}

export default withRouter(RowChart);