const COLORS = ["rgb(244, 67, 54)","rgb(0, 150, 136)","rgb(96, 125, 139)","rgb(156, 39, 176)","rgb(103, 58, 183)","rgb(63, 81, 181)","rgb(33, 150, 243)","rgb(3, 169, 244)","rgb(0, 188, 212)","rgb(76, 175, 80)","rgb(139, 195, 74)","rgb(255, 193, 7)","rgb(255, 152, 0)","rgb(255, 87, 34)","rgb(233, 30, 99)","rgb(121, 85, 72)"];
var userColor = {};
var svg = document.querySelector('svg');

const jan4 = new Date('2016-01-04');  
const X_PADDING = 17;
const LINE_HEIGHT = 10; 
const MILLISECOND_A_DAY = (1000*60*60*24);
const BUGZILLA_API_URL = 'https://bugzilla.mozilla.org/rest/';
const EMAIL = '[email protected]';

const HOLIDAYS = [{
  name: 'Skiing',
  start : new Date('2016-01-16'),
  end: new Date('2016-01-23')
}];

drawHolidays();

var lanes = [];
var bugs = [];

const weekNumber = Math.ceil(((new Date()) - jan4)/MILLISECOND_A_DAY/7);
const todayNumber = (((new Date()) - jan4)/MILLISECOND_A_DAY);
 
var params = {
  "include_fields": "id,summary,status,cf_last_resolved,target_milestone,creation_time,resolution, assigned_to",
  "email1": EMAIL,
  "emailassigned_to1":1
};
if(window.URLSearchParams){
  var searchParams = new URLSearchParams();

  Object.keys(params).forEach(function(key){
    searchParams.append(key, params[key]);
  });
  searchParams = searchParams.toString();
} else {
  var searchParams = [];
  Object.keys(params).forEach(function(key){
    searchParams.push(key+"="+params[key]);
  });
  searchParams = searchParams.join('&');
}


var url = `${BUGZILLA_API_URL}bug?${searchParams}`;
var myHeaders = new Headers();
myHeaders.append('Accept', 'application/json');

fetch(url, {
  mode: 'cors',
  method: 'GET',
  headers: myHeaders
})
.then((response) => response.json())
.then(function(data){
  var promises = [];
  data.bugs.forEach(function(bug){
    if(bug.cf_last_resolved && new Date(bug.cf_last_resolved) < jan4){
      return;
    }
    var historyPromise = getBugHistory(bug).then(function(history){
      bug.history = history;
      drawBug(bug);
      return bug
    });
/*    var commentsPromise = getBugComments(bug);
    commentsPromise.then(function(comments){
      bug.comments = comments;
    });
    var infoPromise = Promise.all([historyPromise, commentsPromise]).then(function(results){
      return bug;
    });*/
    promises.push(historyPromise);
  });
  
  return Promise.all(promises);
})
.then(function(data){
  bugs = data;

  updateDashboard(bugs);
  drawWeeks(bugs);
})
.catch((e) => console.error(e));

svg.addEventListener('click',function(e){
  if(document.body.classList.contains('zoomed') === false){
    if( 
      e.target.classList.contains('bug-line') ||      
      e.target.parentElement.classList.contains('bug-line')
    ) {
      var el = e.target;
      if(!el.classList.contains('bug-line')){
        el = e.target.parentElement;
      }
      zoomInBug(el);
    }
  }
}, false);

document.getElementById('esc').addEventListener('click', zoomOut);
document.body.addEventListener('keydown', function(evt){
  if(evt.key === 'Escape'){
    zoomOut();
  }
});
function getBugHistory(bugData){
  var url = `${BUGZILLA_API_URL}bug/${bugData.id}/history`;
  return fetch(url, {
    mode: 'cors',
    method: 'GET',
    headers: myHeaders
  })
  .then((response) => response.json())
  .then(function(data){
    data.bugs[0].history.some(function(activity){
      var hasAssignement = activity.changes.some(function(change){
        return (change.field_name === 'assigned_to' && change.added === EMAIL);
      });
      if(hasAssignement === true){
        bugData.assign_time = activity.when;
        return true;
      }
    });
    if(!bugData.assign_time && bugData.assigned_to == EMAIL){
        bugData.assign_time = bugData.creation_time;
    }
    return data.bugs[0].history;
  }).catch((e) => console.error(e));
}

function getBugComments(bugData){
 var url = `${BUGZILLA_API_URL}bug/${bugData.id}/comment`;
  return fetch(url, {
    mode: 'cors',
    method: 'GET',
    headers: myHeaders
  })
  .then((response) => response.json())
  .then(function(data){
    return data.bugs[bugData.id].comments;
  }).catch((e) => console.error(e));  
}

function drawBug(bug){
  if(bug.assign_time !== null ){
    var colorIndex = (bug.id % (COLORS.length - 1));
    var bugColor = COLORS[colorIndex];
    var startDayNumber = 0;
    if(new Date(bug.assign_time) > jan4){
      startDayNumber = (new Date(bug.assign_time) - jan4)/MILLISECOND_A_DAY; 
    }
    
    var endDate = new Date();
    if(bug.cf_last_resolved){
      endDate = new Date(bug.cf_last_resolved);
    }
    var endDayNumber = ((endDate - jan4)/MILLISECOND_A_DAY);

    var startPoint = X_PADDING + startDayNumber;
    var endPoint = X_PADDING + endDayNumber;
    var laneNumber = findLane(startPoint,endPoint);
  
    if(!lanes[laneNumber]){
      lanes[laneNumber] = [];
    }
    lanes[laneNumber].push([startPoint,endPoint]);
    var y = (laneNumber + 1 ) * LINE_HEIGHT;
    var bugGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
    bugGroup.classList.add('bug-line'); 
    bugGroup.setAttribute('title', `Bug ${bug.id} - ${bug.summary}`); 
    bugGroup.setAttribute('data-bug-id', bug.id); 

    if(bug.cf_last_resolved && bug.resolution == 'FIXED'){
      var endCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      endCircle.classList.add('resolved');
      endCircle.setAttribute('cx',endPoint);
      endCircle.setAttribute('cy', y);
      endCircle.setAttribute('r', 2);
      endCircle.setAttribute('fill', bugColor);
      bugGroup.appendChild(endCircle);
    } 

      var assignStartDayNumber = ((new Date(bug.assign_time) - jan4)/MILLISECOND_A_DAY);
      var assignStartPoint = X_PADDING + assignStartDayNumber;
      
      var bugAssignedLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
      bugAssignedLine.setAttribute('x1', assignStartPoint); 
      bugAssignedLine.setAttribute('y1', y);
      bugAssignedLine.setAttribute('x2', endPoint);
      bugAssignedLine.setAttribute('y2', y);
      bugAssignedLine.setAttribute('stroke', bugColor);
      bugAssignedLine.setAttribute('stroke-width', 2);
      bugAssignedLine.setAttribute('stroke-linecap', "round");
      bugGroup.appendChild(bugAssignedLine);
    
    svg.appendChild(bugGroup);
    }
}

function drawWeeks(bugs){
  
  var weekGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
  weekGroup.classList.add('weeks');
  for(var i = 0; i <= 52; i++){
    var weekLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
    var x = X_PADDING + (i * 7);
    weekLine.setAttribute('x1', x);
    weekLine.setAttribute('y1', 0);
    weekLine.setAttribute('x2', x);
    weekLine.setAttribute('y2', 10000);
    weekLine.setAttribute('stroke', 'rgba(0,0,0,0.3)');
    weekLine.setAttribute('stroke-width', 0.1);
    weekGroup.appendChild(weekLine); 

    if(todayNumber >= i * 7){
      var weekStatus = document.createElementNS("http://www.w3.org/2000/svg", "rect");
      weekStatus.setAttribute('x', x);
      weekStatus.setAttribute('y', 0);
      weekStatus.setAttribute('width', 7);
      weekStatus.setAttribute('height', 2);
      
      var hasResolved = bugs.some(function(bug){
        if(bug.cf_last_resolved){
          var resolvedDayNumber = (new Date(bug.cf_last_resolved) - jan4)/MILLISECOND_A_DAY;
          return (Math.floor(resolvedDayNumber /7) == i);
        }
      });
      var fillColor = hasResolved?'#8BC34A':'#F44336';
      if(!hasResolved && i + 1 === weekNumber){
         fillColor = '#607D8B';
      }
       
      weekStatus.setAttribute('fill', fillColor);
      weekGroup.appendChild(weekStatus); 
    }
  }
  svg.insertBefore(weekGroup,svg.firstChild);
}

function drawHolidays(){
  var holidaysGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
  holidaysGroup.classList.add('holidays');
  HOLIDAYS.forEach(function(holiday){
    var holidayRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    holidayRect.setAttribute('title', holiday.name); 
    holidayRect.setAttribute('x', getPositionFromDate(holiday.start)); 
    holidayRect.setAttribute('y', 2);
    holidayRect.setAttribute('width', getPositionFromDate(holiday.end) - getPositionFromDate(holiday.start));
    holidayRect.setAttribute('height', 10000);
    holidayRect.setAttribute('fill', '#77B6EC');
    holidayRect.setAttribute('fill-opacity', 0.3);
    holidaysGroup.appendChild(holidayRect);
  });
  
  svg.appendChild(holidaysGroup);
}

function zoomInBug(el){
    var id = el.getAttribute("data-bug-id");
    var bugData = bugs.find(function(item){
      return (item.id == id);
    });
    
    var line = el.querySelector('line');
    
    var duration = 500;
    var x1 = parseFloat(line.getAttribute("x1"));
    var x2 = parseFloat(line.getAttribute("x2"));
    var y = parseFloat(line.getAttribute("y1"));
    var strokeWidth = parseFloat(line.getAttribute("stroke-width"));
  
    line.setAttribute("data-x1",x1);
    line.setAttribute("data-x2",x2);
    line.setAttribute("data-y",y);
    line.setAttribute("data-stroke-width",strokeWidth);
  
    var x1FromStart = x1 - X_PADDING;
    var x1MoveByMs = x1FromStart/duration;
    var x2FromStart = 400 - x2 - X_PADDING;
    var x2MoveByMs = x2FromStart/duration;
    var yFromMiddle = 50 - y;
    var yMoveByMs = yFromMiddle/duration;
    var finalStrokeWidth = 20;
    var strokeWidthMoveByMs = (finalStrokeWidth - strokeWidth)/duration;
    var start = 0;
  
    function zoom(timestamp) {
      if (!start) start = timestamp;
      var progress = timestamp - start;
      if (progress < duration) { 
        line.setAttribute('x1',x1 - (x1MoveByMs * progress));
        line.setAttribute('x2',x2 + (x2MoveByMs * progress));
        line.setAttribute('y1',y + (yMoveByMs * progress));
        line.setAttribute('y2',y + (yMoveByMs * progress));
        line.setAttribute('stroke-width',strokeWidth + (strokeWidthMoveByMs*progress));
        requestAnimationFrame(zoom);
      } else {
        line.setAttribute('x1',X_PADDING);
        line.setAttribute('x2',400 - X_PADDING);
        line.setAttribute('y1',50);
        line.setAttribute('y2',50);
        line.setAttribute('stroke-width',finalStrokeWidth);
        
        document.querySelector('.bug-title').innerHTML =`<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=${id}" target="blank">Bug ${id} - ${bugData.summary}</a>`;
        drawBugDetail(el, bugData);
      }
    }
    requestAnimationFrame(zoom);
    
    document.body.classList.add('zoomed');
    el.classList.toggle('detail');
}

function drawBugDetail(el, bugData){
  var assignDate = new Date(bugData.assign_time);
  var endDate = new Date();
  if(bugData.cf_last_resolved){
    endDate = (new Date(bugData.cf_last_resolved));
  } 
  var bugPeriod = [assignDate, endDate];

  var bugGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
  bugGroup.classList.add('detail-bug-line'); 

  if(bugData.cf_last_resolved){
    var endCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    endCircle.setAttribute('cx',getPositionFromDate(endDate,bugPeriod));
    endCircle.setAttribute('cy', 50);
    endCircle.setAttribute('r', 9);
    endCircle.setAttribute('fill', 'rgba(0,0,0,0.3)');
    endCircle.setAttribute('title',`RESOLVED ${bugData.cf_last_resolved}`)
    bugGroup.appendChild(endCircle);
  }

  var bugLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
  bugLine.setAttribute('title', `Bug ${bugData.id} - ${bugData.summary}`); 
  bugLine.setAttribute('x1', getPositionFromDate(new Date(bugData.creation_time),bugPeriod));
  bugLine.setAttribute('y1', 50);
  bugLine.setAttribute('x2', getPositionFromDate(endDate,bugPeriod)); 
  bugLine.setAttribute('y2', 50);
  bugLine.setAttribute('stroke', 'rgba(0,0,0,1)');
  bugLine.setAttribute('stroke-width', 2);
  bugLine.setAttribute('stroke-linecap', 'round');
  bugGroup.appendChild(bugLine);

  var groups = [];
  var historyEntries = [];
  bugData.history.forEach(function(entry){
    if(! userColor[entry.who]){
      userColor[entry.who] = COLORS.shift();
    }
    var entryColor = userColor[entry.who];

    historyEntries.push({
      x : getPositionFromDate(new Date(entry.when),bugPeriod),
      title: `${entry.when} - ${entry.who} : ${entry.changes.map((item) => (item.field_name + " " + item.added)).join(' - ')}`,
      color: entryColor,
      mine: entry.who === EMAIL
    });
  });
  /*bugData.comments.forEach(function(entry){
    if(! userColor[entry.creator]){
      userColor[entry.creator] = COLORS.shift();
    }
    var entryColor = userColor[entry.creator];

    historyEntries.push({
      x : getPositionFromDate(new Date(entry.creation_time),bugPeriod),
      title: `${entry.creation_time} - ${entry.creator} : ${entry.text.substr(0,100)}`,
      color: entryColor,
      mine: entry.creator === EMAIL
    });
  });*/
  historyEntries.sort(function(a, b){
    return a.x > b.x ? 1 : -1;
  });
  historyEntries.reduce(function(previousValue, currentValue, currentIndex, array){
    if(groups.length > 0 && previousValue && currentValue.x - previousValue.x < 10){
      groups[groups.length - 1].push(currentValue);              
    } else {
      groups.push([currentValue]);
    }
    return currentValue;
  },null);

  groups.forEach(function(group, index){
    var groupGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");

    var circleR = 10;
    var strokeWidth = 2;
    var x1 = group[0].x;
    var x2 = group[group.length - 1].x;

    var groupLine = document.createElementNS("http://www.w3.org/2000/svg", "line");

    groupLine.setAttribute('x1',x1);
    groupLine.setAttribute('x2',x2);
    groupLine.setAttribute('y1', 50);
    groupLine.setAttribute('y2', 50);
    groupLine.setAttribute('stroke', 'rgba(0,0,0,1)');
    groupLine.setAttribute('stroke-width', 12 );
    groupLine.setAttribute('stroke-linecap', 'round');
    groupGroup.appendChild(groupLine);

    var clipId = 'group-'+index;
    var groupClipath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
    groupClipath.setAttribute('id',clipId);
    var startCircleClip = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    startCircleClip.setAttribute('cx',x1);
    startCircleClip.setAttribute('cy',50);
    startCircleClip.setAttribute('r',circleR / 2);

    var endCircleClip = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    endCircleClip.setAttribute('cx',x2);
    endCircleClip.setAttribute('cy',50);
    endCircleClip.setAttribute('r',circleR / 2);

    var rectClip = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rectClip.setAttribute("x",x1);
    rectClip.setAttribute("y",50 - (circleR/2) );
    rectClip.setAttribute("height",circleR );
    rectClip.setAttribute("width", x2-x1);

    groupClipath.appendChild(startCircleClip);
    groupClipath.appendChild(endCircleClip);
    groupClipath.appendChild(rectClip);

    groupGroup.appendChild(groupClipath);

    var groupStart = x1 - circleR;
    var groupEnd = x2 + circleR;
    var entryWidth = (groupEnd - groupStart)/group.length;
    group.forEach(function(groupEntry, idx){
      var entryLine = document.createElementNS("http://www.w3.org/2000/svg", "rect");   
      entryLine.setAttribute('x', groupStart  + (entryWidth * idx) );
      entryLine.setAttribute('width', entryWidth );
      entryLine.setAttribute('fill', groupEntry.color);
      entryLine.setAttribute('stroke', 'black');
      entryLine.setAttribute('title', groupEntry.title);
      entryLine.setAttribute('y', 50 - circleR );
      entryLine.setAttribute('height', circleR * 2);
      entryLine.setAttribute('stroke-width', .5);
      entryLine.setAttribute('clip-path',`url(#${clipId})`);
      groupGroup.appendChild(entryLine);
    })

    bugGroup.appendChild(groupGroup);
  });

  el.appendChild(bugGroup);

  for(var i = 0; i <= (endDate.getTime() - jan4.getTime()) / (MILLISECOND_A_DAY * 7); i++){
    var weekLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
    var firstWeekDay = new Date(jan4.getTime() + ( i * MILLISECOND_A_DAY * 7));
    firstWeekDay.setHours(0,0,0);
    if(firstWeekDay > (new Date(bugData.assign_time) - (MILLISECOND_A_DAY * 7)) && firstWeekDay <= endDate){
      weekLine.setAttribute('x1', getPositionFromDate(firstWeekDay,bugPeriod)); 
      weekLine.setAttribute('y1', 0);
      weekLine.setAttribute('x2', getPositionFromDate(firstWeekDay,bugPeriod));
      weekLine.setAttribute('y2', 100);
      weekLine.setAttribute('stroke', 'black');
      weekLine.setAttribute('stroke-opacity', 0.4);
      weekLine.setAttribute('stroke-width', 0.2);
      bugGroup.insertBefore(weekLine,bugGroup.firstChild);

      var weekText = document.createElementNS("http://www.w3.org/2000/svg", "text");
      weekText.textContent = 'Week #'+ (i +1);
      var pos = getPositionFromDate(firstWeekDay,bugPeriod);
      if(pos < 0){
        pos = 0;
      }
      console.log(weekText.textContent, pos, 'next week',getPositionFromDate(new Date(firstWeekDay.getTime() + (7 * MILLISECOND_A_DAY)),bugPeriod))
      if(getPositionFromDate(new Date(firstWeekDay.getTime() + (7 * MILLISECOND_A_DAY)),bugPeriod) - pos < 40){
         weekText.textContent = '#'+ (i +1);
      }
      
      weekText.setAttribute('x', pos + 5);
      weekText.setAttribute('y', 20 );
      weekText.setAttribute('font-size',10);
      weekText.setAttribute('font-family','Signika');
      weekText.setAttribute('fill', '#666');
      bugGroup.insertBefore(weekText, bugGroup.firstChild);
    }
  }

  for(var i = 0; i <= (endDate.getTime() - bugData.assign_time ) / MILLISECOND_A_DAY ; i++){

    var day = new Date(bugData.assign_time + ( i * MILLISECOND_A_DAY));
    day.setHours(0,0,0);
    var dayLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
    var pos = getPositionFromDate(day,bugPeriod);
    dayLine.setAttribute('x1',pos); 
    dayLine.setAttribute('y1', 25);
    dayLine.setAttribute('x2', pos);
    dayLine.setAttribute('y2', 75);
    dayLine.setAttribute('stroke', 'black');
    dayLine.setAttribute('stroke-opacity', 0.1);
    dayLine.setAttribute('stroke-width', .5);
    bugGroup.insertBefore(dayLine,bugGroup.firstChild);
  } 
}

function zoomOut(){
  var zoomedEl = document.querySelector('.detail');
  if(zoomedEl){
    var detail = zoomedEl.querySelector('.detail-bug-line');
    if(detail){
      detail.remove();
    }
    
    var line = zoomedEl.querySelector('line');
    var duration = 500;
    var x1 = parseFloat(line.getAttribute("x1"));
    var x2 = parseFloat(line.getAttribute("x2"));
    var y = parseFloat(line.getAttribute("y1"));
    var strokeWidth = parseFloat(line.getAttribute("stroke-width"));
    
    var initialX1 = parseFloat(line.getAttribute("data-x1"));
    var initialX2 = parseFloat(line.getAttribute("data-x2"));
    var initialY = parseFloat(line.getAttribute("data-y"));
    var initialStrokeWidth = parseFloat(line.getAttribute("data-stroke-width"));
    
    var x1Move = x1 - initialX1;
    var x1MoveByMs = x1Move/duration;
    var x2Move = x2 - initialX2;
    var x2MoveByMs = x2Move/duration;
    var yMove = y - initialY;
    var yMoveByMs = yMove/duration;
    var strokeWidthMoveByMs = (strokeWidth - initialStrokeWidth)/duration;
    var start = 0;
    function zoomOut(timestamp) {
      if (!start) start = timestamp;
      var progress = timestamp - start;
      if (progress < duration) { 
        line.setAttribute('x1',x1 - (x1MoveByMs*progress));
        line.setAttribute('x2',x2 - (x2MoveByMs*progress));
        line.setAttribute('y1',y - (yMoveByMs*progress));
        line.setAttribute('y2',y - (yMoveByMs*progress));
        line.setAttribute('stroke-width',strokeWidth - (strokeWidthMoveByMs*progress));
        requestAnimationFrame(zoomOut);
      } else {
        line.setAttribute('x1',initialX1);
        line.setAttribute('x2',initialX2);
        line.setAttribute('y1',initialY);
        line.setAttribute('y2',initialY);
        line.setAttribute('stroke-width',initialStrokeWidth);
        document.querySelector('.bug-title').innerHTML ="";
        zoomedEl.classList.remove('detail');
        document.body.classList.remove('zoomed'); 
      }
    }
    requestAnimationFrame(zoomOut);
  }
}

function getPositionFromDate(date, period){
    
    if(period){
      var start = period[0];
      var end = period[1];
      var length = (end - start);
      var percent = (date - start)/length;
      return X_PADDING + ((400 - (X_PADDING*2)) * percent);
    }
    var dayNumber = ((date - jan4)/MILLISECOND_A_DAY);
    if(dayNumber < 0){
      dayNumber = 0;
    }
    return X_PADDING + dayNumber;
}

function findLane(start, end){
  var lane = 0;
  var safe_space = 4;
  start = start - safe_space;
  end = end + safe_space;
  for(;lane < lanes.length;lane++){
    var fit = lanes[lane].every(function(xs){
      return !(
        ( xs[0] >= start && xs[0] <= end ) ||
        ( start >= xs[0] && start <= xs[1] )
      );
    });
    if(fit === true){
      break;
    }
  }
  return lane;
}

function updateDashboard(bugs){
  var fixedBugs = bugs.filter(function(bug){
    return (bug.resolution === "FIXED");
  });
  var resolutionWeeks = fixedBugs.map((bug) => Math.ceil(((new Date(bug.cf_last_resolved)) - jan4)/MILLISECOND_A_DAY/7));
  
  var missedWeeks = [];
  for(var i = 1; i <=weekNumber; i++){
    if(resolutionWeeks.indexOf(i) === -1){
      missedWeeks.push(i);
    }
  }
  
  document.getElementById('currentWeek').textContent = weekNumber;
  document.getElementById('failedWeek').textContent = missedWeeks.length;
  document.getElementById('failedWeek').setAttribute("title", missedWeeks.map((x) => `#${x}`).join(' - '));
  document.getElementById('bugsFixed').textContent = fixedBugs.length;
  document.getElementById('successPercentage').textContent = Math.round((fixedBugs.length / weekNumber) * 100)+"%";
  
  document.querySelector('.stats').classList.toggle('ready');
}