import { arc } from 'd3-shape';
import {
	__,
	add,
	always,
	divide,
	equals,
	ifElse,
	multiply,
	pipe,
	subtract,
} from 'ramda';
import { useMemo } from 'react';
import { GaugeSVGProps } from 'types';
import { mapIndexed } from 'utils';

const roundTo2Digits = (n: number) => n.toPrecision(2);

const calculate = (length: number) =>
	pipe(multiply(3), divide(__, length), subtract(__, 1.5), roundTo2Digits);

const getEnd = (length: number) =>
	ifElse(
		equals(length - 1),
		always(Math.PI / 2),
		pipe(add(1), calculate(length))
	);
const getStart = (length: number) =>
	ifElse(equals(0), always(-Math.PI / 2), calculate(length));

const mapArc = (length: number) => (_: any, i: number) =>
	arc().cornerRadius(0)({
		startAngle: getStart(length)(i),
		endAngle: getEnd(length)(i),
		innerRadius: 0.65,
		outerRadius: 1,
	}) as string;

const generateArcMap = (arr: any[]) =>
	mapIndexed(mapArc(arr.length), arr) as string[];

export const useComponentLogic = ({ angle, colors }: GaugeSVGProps) => {
	const arcs = useMemo(() => generateArcMap(colors), [colors]);
	const arrowTransform = useMemo(
		() => `rotate(${angle * (180 / Math.PI)} -1 -1)`,
		[angle]
	);
	return { arcs, arrowTransform };
};