<script>
  import SvgContainer from '$lib/shared/svg-container.svelte';
  import Animation from '$lib/shared/animation.svelte';
  import { circlePoint, point } from '$lib/utils/path-utils';
  import { linePath } from '$lib/utils/svg-utils';
  import { hue2color } from '$lib/utils/color-utils';
  import { nums } from '$lib/utils/math-utils';

  export let count = 4;
  export let show = false;

  let angle = 0;

  const animate = () => (angle = angle + 2);

  const center = point(200, 200);
  const radius = 180;

  $: colors = nums(count).map((i) => hue2color(45 + (360 / count) * i));

  $: points = nums(count).map((i) => [
    circlePoint(center, radius, (360 / count) * i),
    circlePoint(center, radius, (360 / count) * i + angle)
  ]);
</script>

<Animation run={animate} />
<SvgContainer>
  <circle cx={center.x} cy={center.y} r={radius} stroke="#fff" fill="none" />
  {#each points as [s, e], i}
    {#if show}
      <circle cx={s.x} cy={s.y} r={5} fill={colors[i]} stroke="none" />
    {/if}
    <path d={linePath(s, e)} stroke-width={1.25} stroke={colors[i]} fill="none" />
  {/each}
</SvgContainer>