<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 = 3;
  export let corners = 3;

  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));

  $: polygons = nums(count).map((i) =>
    nums(corners).map((k) =>
      linePath(
        circlePoint(center, radius, (360 / corners / count) * i + (360 / corners) * k),
        circlePoint(center, radius, (360 / corners / count) * i + (360 / corners) * (k + 1))
      )
    )
  );
</script>

<Animation run={animate} />
<SvgContainer>
  <!-- <circle cx={center.x} cy={center.y} r={radius}  stroke="#fff" fill="none" /> -->
  {#each polygons as pathes, i}
    {#each pathes as path}
      <path d={path} stroke-width={1.25} stroke={colors[i]} fill="none" />
    {/each}
  {/each}
</SvgContainer>