/* eslint-disable react/jsx-curly-brace-presence */
import React, { useRef, useState, useEffect } from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

import globalStyle from '../../../Components/GlobalStyles/globals.module.scss';
import styles from './GaugeChart.module.scss';
import GaugeNeedle from './GaugeNeedle';

interface GaugeChartProps {
	title: string;
	subtitle?: string;
	value: number;
	change: number;
	extremes: number[];
	extremesLabels: string[];
	segments: { range: number; color: string }[];
	needleColor: string;
	// labels?: { label: string; value: number; color: string }[];
	labels?: [];
}

const pieChartHieght = 120;

const getNeedleCoords = (
	value: number,
	size: { width: number; height: number },
	radius = 60,
	cx = 100,
	cy = 100
) => {
	const { width, height } = size;
	const angle = 180 - (value / 100) * 180;
	const radian = (Math.PI * angle) / 180;
	const x = (width || cx) / 2 + radius * Math.cos(radian);
	const y = (height || cy) / 2 - radius * Math.sin(radian);
	return { x, y };
};

const GaugeChart = ({
	title,
	subtitle,
	value,
	change,
	extremes,
	extremesLabels,
	segments,
	needleColor,
	labels = []
}: GaugeChartProps): JSX.Element => {
	const data = segments.map((segment) => ({
		value: segment.range,
		color: segment.color
	}));

	const [size, setSize] = useState({ width: 0, height: 0 });
	const { x, y } = getNeedleCoords(value, size);
	const divRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		function updateSize() {
			if (divRef.current) {
				// const { width, height } = divRef.current.getBoundingClientRect();
				const styles = window.getComputedStyle(divRef.current);
				const rect = divRef.current.getBoundingClientRect();

				const paddingLeft = parseFloat(styles.paddingLeft);
				const paddingRight = parseFloat(styles.paddingRight);
				const paddingTop = parseFloat(styles.paddingTop);
				const paddingBottom = parseFloat(styles.paddingBottom);

				const widthWithoutPadding = rect.width - paddingLeft - paddingRight;
				const heightWithoutPadding = rect.height - paddingTop - paddingBottom;
				setSize({ width: widthWithoutPadding, height: heightWithoutPadding });
			}
		}

		// Get initial size
		updateSize();

		// Optional: observe size changes
		const resizeObserver = new ResizeObserver(() => {
			updateSize();
		});

		if (divRef.current) {
			resizeObserver.observe(divRef.current);
		}

		// Cleanup
		return () => {
			resizeObserver.disconnect();
		};
	}, []);

	return (
		<div className="text-center p-4 rounded-xl bg-white w-72" ref={divRef}>
			<h3 className={globalStyle.title}>{title}</h3>
			{subtitle && (
				<h5 className="font-semibold text-sm mb-2" dangerouslySetInnerHTML={{ __html: subtitle }} />
			)}
			<div style={{ position: 'relative', width: '100%', height: '100%' }}>
				<ResponsiveContainer width="100%" height={pieChartHieght}>
					<PieChart>
						<Pie
							data={data}
							dataKey="value"
							startAngle={180}
							endAngle={0}
							innerRadius={50}
							outerRadius={70}
							cx="50%"
							cy="100%"
							paddingAngle={2}
							isAnimationActive={false}
						>
							{data.map((entry: any, index: any) => (
								<Cell key={`cell-${index}`} fill={entry.color} />
							))}
						</Pie>
						{/* Needle */}
						{/* <svg>
							<line x1="50%" y1="100%" x2={x} y2={y} stroke={needleColor} strokeWidth="2" />
						</svg> */}
						<div style={{ position: 'absolute', top: '100%', left: '50%' }}>
							<svg
								width="100"
								height="100"
								viewBox="0 0 40 100"
								xmlns="http://www.w3.org/2000/svg"
								style={{ position: 'absolute', top: '100%', left: '50%' }}
							>
								{/* // @ts-ignore */}
								<g transform={`translate(20, 90) rotate(90)`}>
									<polygon points="0,-80 -4,0 4,0" fill="#333" />
									<circle cx="0" cy="0" r="5" fill="#333" />
								</g>
							</svg>
						</div>
					</PieChart>
				</ResponsiveContainer>
				<div
					style={{
						position: 'absolute',
						width: '100%',
						height: '100%',
						top: '0',
						left: '0',
						zIndex: 99
					}}
				>
					{/* <svg
						width="100"
						height="100"
						viewBox="0 0 40 100"
						xmlns="http://www.w3.org/2000/svg"
						style={{
							position: 'absolute',
							width: '100px',
							height: '100px',
							bottom: '0',
							left: 'calc(50% - 50px)'
						}}
					>
						<g transform={`translate(20, 90) rotate(90)`}>
							<polygon points="0,-80 -4,0 4,0" fill="#333" />
							<circle cx="0" cy="0" r="5" fill="#333" />
						</g>
					</svg> */}
					<GaugeNeedle
						value={value}
						min={extremes ? extremes[0] : 0}
						max={extremes ? extremes[1] : 100}
						stroke={needleColor}
					/>
				</div>
			</div>
			<div className="text-xl font-bold -mt-6">{value}%</div>
			{extremesLabels && (
				<div className={styles.extremes}>
					<span
						className={`text-sm ${styles.lowExtreme}`}
						// style={{ color: data[0].color, borderColor: data[0].color }}
					>
						{extremesLabels[0]}
					</span>
					<span
						className={`text-sm ${extremesLabels[2] ? styles.midExtreme : styles.maxExtreme}`}
						// style={{ color: data[data.length - 1].color, borderColor: data[data.length - 1].color }}
					>
						{extremesLabels[1]}
					</span>
					{extremesLabels[2] && (
						<span
							className={`text-sm ${styles.maxExtreme}`}
							// style={{
							// 	color: data[data.length - 1].color,
							// 	borderColor: data[data.length - 1].color
							// }}
						>
							{extremesLabels[2]}
						</span>
					)}
				</div>
			)}

			{/* Labels */}
			<div className={`ml-5 mt-4 ${styles['text-left']}`}>
				{labels.map((label, index) => (
					<div key={index} className="text-sm mt-1">
						<span className={styles.label}>{label[0]}: </span>
						<span className={`${styles.value} ${styles[label[3]]}`}>
							{label[1] > 0 ? '+' : ''}
							{label[1]}
							{label[2]}
						</span>
					</div>
				))}
			</div>
			{/* <div className="mt-2 text-sm">
				Change:{' '}
				<span className={isNegative ? 'text-red-600' : 'text-green-600'}>
					{isNegative ? '-' : '+'}
					{Math.abs(change)}%
				</span>
			</div> */}
		</div>
	);
};

export default GaugeChart;