import LinearGradient from "@app/LinearGradient.svelte";

  <!-- Adds a svg linear gradient that can be used by any other svg under the id #gradient -->

  <LinearGradient id="gradient" />

<script lang="ts">

  import { onMount } from "svelte";

  import type { CommitGroup } from "./commit";

  export let strokeWidth: number;

  export let points: CommitGroup[];

  export let strokeColor = "#ff55ff";

  export let viewBoxWidth: number;

  export let viewBoxHeight: number;

  // The path strings to be inserted into the svg <path>

  let path = "";

  let areaPath = "";

  let heightWithPadding = viewBoxHeight + 10;

  // The latest point on the x axis, starting at 0 until `viewBoxWidth`

  let lastWidthPoint = viewBoxWidth;

  // The amount of points on the x axis

  const widthIteration = viewBoxWidth / 52;

  // The highest value on the y axis

  let commitCountArray: number[] = [];

  let week = 0;

  for (const point of points) {

    if (point.week - week > 1) {

      commitCountArray.push(...new Array(point.week - week).fill(0));

    }

    commitCountArray.push(point.commits.length);

    week = point.week;

  }

  // Formats the points passed in, into a svg path string, without closing the area

  function createPath() {

    let i = 1;

    if (commitCountArray.length < 52) commitCountArray.push(...new Array(52 - commitCountArray.length).fill(0));

    let maxValue = Math.max(...commitCountArray);

    let minValue = Math.min(...commitCountArray);

    // Normalizes the values to the viewBox dimensions

    let normalizedArray =

      commitCountArray.map(c =>

        // When max and min value are 0 we want to make sure the normalization is not being run since it would return NaN

        c === 0 ? 0 : (viewBoxHeight - 0) * (c - minValue) / (maxValue - minValue)

      );

    let path = normalizedArray

      .slice(1)

      .reduce((acc, curr) => {

        let s = `${viewBoxWidth - widthIteration * i},${viewBoxHeight - curr}`;

        lastWidthPoint = viewBoxWidth - widthIteration * i;

        i += 1;

        return acc.concat(s);

      },

      [`M${viewBoxWidth},${viewBoxHeight - normalizedArray[0]}`]);

    return path.join();

  }

  onMount(() => {

    // Creates the stroke path with the array of points

    path = createPath();

    // Concats a path closing for it to be the area under the stroke

    areaPath = path.concat(`L${lastWidthPoint},${heightWithPadding}L${viewBoxWidth},${viewBoxHeight+10}Z`);

  });

</script>

<svg viewBox="0 0 {viewBoxWidth} {heightWithPadding}" xmlns="http://www.w3.org/2000/svg">

  <use fill="url(#gradient)" />

  <g>

    <path fill="transparent" stroke={strokeColor} stroke-width={strokeWidth} d={path} />

    <path fill="url('#gradient')" stroke="transparent" d={areaPath} />

  </g>

</svg>

<script lang="ts">

  export let id: string;

  export let fillColor="#ff55ff";

</script>

<svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <linearGradient {id} x1="0" y1="1" x2="0" y2="0">

      <stop offset="0%" stop-color={fillColor} stop-opacity="0" />

      <stop offset="100%" stop-color={fillColor} stop-opacity="0.4" />

    </linearGradient>

  </defs>

</svg>

          <Widget {project} {seed} {anchor} on:click={() => onClick(project)}>

  import { Project } from "@app/project";

  import { ProjectContent } from "@app/project";

    const commitsQuery = await Project.getCommits(project.urn, project.seed.api, parentCommit);

          <p>{group.date}</p>

  import Diagram from '@app/Diagram.svelte';

  import { groupCommitsByWeek } from '@app/commit';

  import { Project } from '@app/project';

  import type { Seed } from '@app/base/seeds/Seed';

  export let seed: Seed;

  const getTimestampOneYearAgo = () => {

    const now = new Date();

    const oneYearAgo = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate());

    return Math.floor(oneYearAgo.getTime() / 1000).toString();

  };

  const loadCommits = async () => {

    const commits = await Project.getCommits(project.urn, seed.api, project.head ?? undefined, getTimestampOneYearAgo(), undefined, "500", "0");

    return groupCommitsByWeek(commits.headers);

  };

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    min-height: 140px;

  article .right {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-end;

  }

  article .left {

    width: 50%;

  }

  div .description {

    overflow-x: hidden;

    text-overflow: ellipsis;

  }

  .activity {

    width: 100%;

    max-width: 14rem;

  }

  article:hover .anchor {

    display: block;

  }

  article:hover .activity {

    display: none !important;

  }

  article .stateHash {

  <div class="left">

    <div class="id">

      <span class="name">{project.name}</span>

    </div>

    <div class="description">{project.description || ""}</div>

    <div class="stateHash">

      <span class="commit">

        <slot name="stateHash">

          {#if project.head}

            {project.head}

          {:else}

            <span class="subtle">✗ No head</span>

    </div>

  </div>

  <div class="right">

    <div class="id">

      <span class="urn desktop">{project.urn}</span>

    </div>

    <div class="anchor">

      <span class="anchor-info">

        <span class="actions">

          <slot name="actions">

          </slot>

        </span>

        <span class="anchor-badge">

          <slot name="anchor">

            {#if anchor && project.head}

              <AnchorBadge

                commit={project.head}

                head={project.head} noText noBg

                anchors={[anchor.anchor.stateHash]} />

            {/if}

          </slot>

        </span>

      </span>

    </div>

    {#await loadCommits() then points}

      <div class="desktop activity">

        <Diagram {points}

          strokeWidth={1.25}

          viewBoxHeight={100}

          viewBoxWidth={600}

        />

      </div>

    {/await}

  date: string;

  time: number;

  week: number;

          date: formatGroupTime(time),

          time,

          week: 0

export function groupCommitsByWeek(commits: CommitMetadata[]): CommitGroup[] {

  const groupedCommits: CommitGroup[] = [];

  let groupDate: Date | undefined = undefined;

  if (commits.length === 0) {

    return [];

  }

  commits = commits.sort((a, b) => {

    if (a.header.committerTime > b.header.committerTime) {

      return -1;

    } else if (a.header.committerTime < b.header.committerTime) {

      return 1;

    }

    return 0;

  });

  // A accumulator that increments by the amount of weeks between weekly commit groups

  let weekAccumulator = Math.floor(getDaysPassed(new Date(commits[0].header.committerTime * 1000), new Date()) / 7);

  // Loops over all commits and stores them by week with some additional metadata in groupedCommits.

  for (const commit of commits) {

    const time = commit.header.committerTime * 1000;

    const date = new Date(time);

    const isNewWeek =

      !groupedCommits.length ||

      !groupDate ||

      getDaysPassed(date, groupDate) > 7 ||

      date.getFullYear() < groupDate.getFullYear();

    if (isNewWeek) {

      let daysPassed = 0;

      if (groupDate) {

        daysPassed = getDaysPassed(date, groupDate);

      }

      groupedCommits.push({

        date: formatGroupTime(time),

        time,

        commits: [],

        week: Math.floor(daysPassed / 7) + weekAccumulator

      });

      groupDate = date;

      weekAccumulator += Math.floor(daysPassed / 7);

    }

    groupedCommits[groupedCommits.length - 1].commits.push(commit);

  }

  return groupedCommits;

}

// Get amount of days passed between two dates

function getDaysPassed(from: Date, to: Date): number {

  return Math.floor(

    (to.getTime() - from.getTime()) / (24 * 60 * 60 * 1000)

  );

}

  static async getCommits(urn: string, host: api.Host, parent?: string, since?: string, until?: string, perPage?: string, page?: string): Promise<CommitsHistory> {

    const params: Record<string, string | undefined> = { parent, since, until, "per-page": perPage, page };

    // Removes the undefined params.

    Object.keys(params).forEach(key => params[key] === undefined && delete params[key]);

    return api.get(`projects/${urn}/commits`, params, host);