@use "sass:map";
@use "sass:math";
@use "abstracts/variables";

// ====================
// == Radar Charts
//
// ====================

.chaarts[class*="radar"] {
	--radius: #{variables.$width * 0.2};
	--unitless-radius: calc(1024 / 16 / 5);
	--size: calc(var(--radius) / var(--scale));
	--part: calc(360deg / var(--items));
	--integer: calc(var(--scale));

	background-image:
		repeating-radial-gradient(
			circle at 50%,
			var(--foreground-o-25) 0 2px,
			transparent 0 calc(var(--size) * var(--step))
		),
		repeating-radial-gradient(
			circle at 50%,
			var(--foreground-o-10) 0 2px,
			transparent 0 var(--size)
		);
	block-size: calc(var(--radius) * 2);
	border: 2px solid;
	border-radius: 50%;
	contain: layout;
	counter-reset: scale var(--integer);
	inline-size: calc(var(--radius) * 2);
	margin: variables.$gutter * 6 auto variables.$gutter * 12;
	overflow: visible;
	position: relative;

	caption {
		background: none;
		inset-block-end: variables.$gutter * -10;
		position: absolute;
	}

	// ====================
	// Placing items around a circle
	//
	// @link https://stackoverflow.com/questions/12813573/position-icons-into-circle
	// @link http://dabblet.com/gist/3866686
	// @author Ana Tudor
	//
	// @note Negative values for radius helps to start at the top left corner
	// ====================
	[scope="col"] {
		--away: calc((var(--radius) * -1) - 50%);

		background-color: transparent;
		left: 50%;
		margin: 0;
		padding: 0 variables.$gutter;
		position: absolute;
		top: 50%;
		transform: translate3d(-50%, -50%, 0) rotate(calc(var(--part) * var(--index, 1))) translate(var(--away)) rotate(calc(var(--part) * var(--index, 1) * -1));
	}

	@each $number in 1, 2, 3, 4, 5, 6, 7 {
		tr > *:nth-of-type(#{$number}) {
			--index: #{$number};
		}
	}

	// ====================
	// This is quite sophisticated, we're mixing multiple techniques
	//
	// @note Setting items as parts of the circle:
	// @link https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
	// @author Sara Soueidan
	//
	// @note Because we skew items, clip-path() needs to take skew angle into account
	// @note To do so, we need to know skewed width (which is hypothenuse of the resulting triangle)
	// @note We only know two angles (skew one + square one) and a side (initial width),
	// @note So we need to compute the sinus of the opposite angle to get hypothenuse
	// @note Thanks god, sin() exists
	// ====================
	td {
		--skew: calc(90deg - var(--part));

		block-size: 50%;
		border-block-end: 1px solid var(--chaarts-purple);
		inline-size: 50%;
		left: 0;
		margin: 0;
		position: absolute;
		top: 0;
		transform: rotate(calc(var(--part) * var(--index, 1))) skew(var(--skew));
		transform-origin: 100% 100%;

		@each $number in 1, 2, 3, 4, 5, 6, 7 {
			&:nth-of-type(#{$number}) span {
				--point: var(--#{$number});
				--pos: calc(100% - (var(--#{$number + 1}) * 100% / (var(--scale) * var(--ratio))));
			}
		}

		&::after,
		&::before {
			display: none;
		}
	}

	span {
		--opposite: calc(180 - (90 + (90 - (360 / var(--items)))));

		// Get opposite angle in radians
		--angle: calc(var(--opposite) * var(--to-radians));
		--sin-angle: sin(var(--angle));

		// calc() hypothenuse
		--hypo: calc(var(--unitless-radius) / var(--sin-angle));

		// Get the ratio: skewed / initial width
		--ratio: calc(var(--hypo) / var(--unitless-radius));
		--polygon: polygon(
				100% var(--pos),
				calc(100% - (var(--point) * 100% / var(--scale))) 100%,
				100% 100%
		);

		background: var(--chaarts-purple);
		block-size: 100%;
		clip-path: var(--polygon);
		filter: drop-shadow(0 0 variables.$gutter var(--chaarts-purple));
		inline-size: 100%;
		position: absolute;
	}
}

// ====================
// 1.
// @note Display CSS integers custom properties with a trick using counters
// @author Cassie Evans
// @link https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab
//
// 2.
// @note We need to ensure our counter uses an integer, --value might a a floating number
// @author Carter Li
// @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution
// ====================
.chaarts.radar [scope="col"] {
	&::after {
		color: var(--foreground-lighter);
		display: block;
		font-size: small;
		font-weight: 400;
	}

	@each $number in 1, 2, 3, 4, 5, 6, 7 {
		&:nth-child(#{$number})::after {
			--integer: calc(var(--#{$number})); // 2

			content: counter(value) "\A0/\A0" counter(scale); // 1
			counter-reset: value var(--integer); // 1
		}
	}
}
