/* global gettext */

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import CircleChart from './CircleChart';
import CircleChartLegend from './CircleChartLegend';
import GradeTable from './GradeTable';
import DueDates from './DueDates';
import Discussions from './Discussions';

function arrayToObject(array) {
  return array.reduce((accumulator, obj) => {
    const key = Object.keys(obj)[0];
    accumulator[key] = obj[key];
    return accumulator;
  }, {})
}

function countByType(type, assignments) {
  let count = 0;
  assignments.map(({format}) => {
    if (format === type) {
      count += 1;
    }
  })
  return count;
}

function getActiveUserString(count) {
  const users = (count === 1) ? 'User' : 'Users';
  return `${users} active in this course right now`;
}

function getAssignmentCounts(types, assignments) {
  const countsArray = types.map((type) => {
    return {
      [type]: countByType(type, assignments)
    }
  });

  return arrayToObject(countsArray);
}

function getStreakIcons(count) {
  return Array.apply(null, { length: count }).map((e, i) => (
    <span className="fa fa-trophy" aria-hidden="true" key={i}></span>
  ));
}

function getStreakString(count) {
  const unit = (count ===1) ? 'week' : 'weeks';
  return `Logged in ${count} ${unit} in a row`;
}

export function LearnerAnalyticsDashboard(props) {
  const {grading_policy, grades, schedule, week_streak, weekly_active_users, discussion_info, profile_images} = props;
  // temp. for local dev
  // const week_streak = 3;
  // const weekly_active_users = 83400;
  const gradeBreakdown = grading_policy.GRADER.map(({type, weight}, index) => {
    return {
      value: weight,
      label: type,
      sliceIndex: index + 1
    }
  });

  // Get a list of assignment types minus duplicates
  const assignments = gradeBreakdown.map(value => value['label']);
  const assignmentTypes = [...new Set(assignments)];
  const assignmentCounts = getAssignmentCounts(assignmentTypes, schedule);

  return (
    <div className="learner-analytics-wrapper">
      <div className="main-block">
        <div className="analytics-group">
          <h2 className="group-heading">Grading</h2>
          {gradeBreakdown && 
            <h3 className="section-heading">Weight</h3>
          }
          {gradeBreakdown && 
            <div className="grading-weight-wrapper">
              <div className="chart-wrapper">
                <CircleChart
                  slices={gradeBreakdown}
                  centerHole={true}
                  sliceBorder={{
                      strokeColor: '#f5f5f5',
                      strokeWidth: 2
                  }}
                />
              </div>
              <CircleChartLegend data={gradeBreakdown} />
            </div>
          }

          <h3 className="section-heading">Graded Assessments</h3>
          <div className="graded-assessments-wrapper">
            <GradeTable assignmentTypes={assignmentTypes} grades={grades} />
          </div>
        </div>
        <div className="analytics-group">
          <Discussions {...discussion_info} profileImages={profile_images} />
        </div>
      </div>
      <div className="analytics-group sidebar">
        <h2 className="group-heading">Timing</h2>
        <h3 className="section-heading">Course due dates</h3>
        <DueDates dates={schedule} assignmentCounts={assignmentCounts} />
        {week_streak > 0 && 
          <div className="week-streak-wrapper">
            <div className="streak-icon-wrapper" aria-hidden="true">{getStreakIcons(week_streak)}</div>
            <h3 className="section-heading">Week streak</h3>
            <p>{getStreakString(week_streak)}</p>
          </div>
        }
        <div className="active-users-wrapper">
          <span className="fa fa-user count-icon" aria-hidden="true"></span>
          <span className="user-count">{weekly_active_users.toLocaleString('en', {useGrouping:true})}</span>
          <p className="label">{getActiveUserString(weekly_active_users)}</p>
        </div>
      </div>
    </div>
  );
}

