/* eslint-disable react/destructuring-assignment */
import styles from '../../Dashboard.module.scss';
import pieStyles from './PieChartContainer.module.scss';
import type { DataArray, OptionsModule } from './TwoRowPieChart';
import TwoRowPieChart from './TwoRowPieChart';

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

interface SmallPieChartInterface {
	title: string;
	firstCalculationName: string;
	firstCalculation: string | number;
	secondCalculationName: string;
	secondCalculation: string | number;
	thirdCalculationName: string;
	thirdCalculation: string | number;
	data: DataArray;
	firstSign: string;
	secondSign: string;
	thirdSign: string;
	options: OptionsModule;
}

const PieChartContainer = (props: SmallPieChartInterface): JSX.Element => {
	const labels = [
		[props.firstCalculationName, +props.firstCalculation, '%'],
		[props.secondCalculationName, +props.secondCalculation, '%'],
		[props.thirdCalculationName, +props.thirdCalculation, '%']
	];
	return (
		<div className={styles.smallChart}>
			<h3 className={globalStyle.title}>{props.title}</h3>
			{/* <SmallPieChart data={props.data} /> */}
			<TwoRowPieChart data={props.data} options={props.options} />

			<div className={`w-100 ml-5 mt-4 ${pieStyles['text-left']}`}>
				{labels.map((label, index) => (
					<div key={index} className="text-sm mt-1">
						<span className={pieStyles.label}>{label[0]}: </span>
						<span className={`${pieStyles.value} ${pieStyles[label[3]]}`}>
							{(label[1] as number) > 0 ? '+' : ''}
							{typeof label[1] === 'number' ? (label[1] as number).toFixed(2) : label[1]}
							{/* {label[2]} */}
						</span>
					</div>
				))}
			</div>
		</div>
	);
};

export default PieChartContainer;