import React, { Component, PropTypes } from 'react';
import cx from 'classnames';
import { calculateTeamcastingResult } from 'utils';

const drawCircles = (canvas, data) => {
  const context = canvas.getContext('2d');
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = '#f0f0f0';
  context.arc(centerX, centerY, centerX * 2, 0, Math.PI * 2, false);
  context.fill();
  data.forEach(({ enabled, width, color }) => {
    if (enabled) {
      context.beginPath();
      context.moveTo(centerX, centerY);
      context.fillStyle = color;
      context.arc(centerX, centerY, width * centerX, 0, Math.PI * 2, false);
      context.lineTo(centerX, centerY);
      context.closePath();
      context.fill();
    }
  });
};

class RoleResultCircle extends Component {
  shouldComponentUpdate(nextProps) {
    return this.props.isActive !== nextProps.isActive ||
      this.props.naturalStrengthSelected !== nextProps.naturalStrengthSelected ||
      this.props.naturalPotentialSelected !== nextProps.naturalPotentialSelected ||
      this.props.fragileStrengthSelected !== nextProps.fragileStrengthSelected ||
      this.props.allRolesSelected !== nextProps.allRolesSelected;
  }

  render() {
    const {
      allRolesSelected,
      assignRoles,
      candidateAssignRoleToggle,
      candidateId,
      checkSelectVisible,
      teamcastingData,
      isActive,
      roleName,
      rolesChecked,
      naturalStrengthSelected,
      naturalPotentialSelected,
      fragileStrengthSelected,
    } = this.props;

    const dataSet = calculateTeamcastingResult(teamcastingData);

    const green = naturalStrengthSelected ? dataSet.green : 0;
    const orange = naturalPotentialSelected ? dataSet.orange : 0;
    const blue = fragileStrengthSelected ? dataSet.blue : 0;

    const greenStyle = {
      width: green,
      height: green,
    };

    const orangeStyle = {
      width: green + orange,
      height: green + orange,
    };

    const blueStyle = {
      width: green + orange + blue,
      height: green + orange + blue,
    };

    const isDisabled = !rolesChecked[roleName] && !allRolesSelected;
    const isClickable = assignRoles;

    const assignCandidate = (cId, rName) => {
      if (isDisabled || !isClickable) return null;

      return candidateAssignRoleToggle(cId, rName);
    };

    const colors = {
      green: '#30b365',
      orange: '#ff9b34',
      blue: '#3097cc',
      gray: '#bfbfbf',
    };

    return (
      <button
        className={cx(
          'rr-circle',
          { 'rr-circle--active': isActive && !checkSelectVisible },
          { 'rr-circle--clickable': isClickable },
        )}
        onClick={() => assignCandidate(candidateId, roleName, isActive)}
      >
        <i className="fa fa-check rr-circle__check" />
        <canvas
          width={70}
          height={70}
          className="rr-circle__wrapper"
          ref={elem => elem && drawCircles(elem,
            [
              {
                enabled: blue,
                color: isDisabled ? colors.gray : colors.blue,
                width: blueStyle.width / 100,
              },
              {
                enabled: orange,
                color: isDisabled ? colors.gray : colors.orange,
                width: orangeStyle.width / 100,
              },
              {
                enabled: green,
                color: isDisabled ? colors.gray : colors.green,
                width: greenStyle.width / 100,
              },
            ],
          )}
        />
        <div className="rr-circle__number">
          {green + orange + blue}
        </div>
      </button>
    );
  }
}

RoleResultCircle.propTypes = {
  assignRoles: PropTypes.bool.isRequired,
  candidateId: PropTypes.number.isRequired,
  checkSelectVisible: PropTypes.bool,
  teamcastingData: PropTypes.shape({
    name: PropTypes.string.isRequired,
    maximum_number: PropTypes.number.isRequired,
    data: PropTypes.arrayOf(PropTypes.shape({
      key: PropTypes.string,
      value: PropTypes.number.isRequired,
      color: PropTypes.string.isRequired,
    })),
  }),
  isActive: PropTypes.bool.isRequired,
  roleName: PropTypes.string.isRequired,
  rolesChecked: PropTypes.shape({
    pioneer: PropTypes.bool.isRequired,
    strategist: PropTypes.bool.isRequired,
    stimulator: PropTypes.bool.isRequired,
    networker: PropTypes.bool.isRequired,
    coach: PropTypes.bool.isRequired,
    coordinator: PropTypes.bool.isRequired,
    producer: PropTypes.bool.isRequired,
    controller: PropTypes.bool.isRequired,
  }),
  candidateAssignRoleToggle: PropTypes.func.isRequired,
  naturalStrengthSelected: PropTypes.bool.isRequired,
  naturalPotentialSelected: PropTypes.bool.isRequired,
  fragileStrengthSelected: PropTypes.bool.isRequired,
  allRolesSelected: PropTypes.bool,
};

RoleResultCircle.defaultProps = {
  assignRoles: false,
  candidateId: 0,
  checkSelectVisible: false,
  teamcastingData: {
    name: '',
    maximum_number: 1,
    data: [
      {
        key: '',
        value: 0,
        color: '',
      },
    ],
  },
  isActive: false,
  roleName: '',
  rolesChecked: {
    pioneer: false,
    strategist: false,
    stimulator: false,
    networker: false,
    coach: false,
    coordinator: false,
    producer: false,
    controller: false,
  },
  showModalFor: '',
  naturalStrengthSelected: true,
  naturalPotentialSelected: true,
  fragileStrengthSelected: true,
  allRolesSelected: true,
  candidateAssignRoleToggle: () => {},
};

export default RoleResultCircle;