import { useState } from '@wordpress/element';

export default function AnalysisPieDetail( props: AnalysisPieDetailProps ) {
	const { label, subPoints, value, percentage } = props;

	// console.log('subPoints', subPoints);

	const [ isOpen, setIsOpen ] = useState( false );

	const mainDetail = (
		<>
			<div className="gs-analysis-pie-detail__labels">
				<span
					className="gs-analysis-pie-detail__color"
					style={ { backgroundColor: props.color } }
				></span>
				<span className="gs-analysis-pie-detail__label">{ label }</span>
			</div>
			<div className="gs-analysis-pie-detail__values">
				<span className="gs-analysis-pie-detail__number">
					{ value }
				</span>
				{ percentage && (
					<span className="gs-analysis-pie-detail__percentage">
						{ percentage }
					</span>
				) }
			</div>
		</>
	);

	return (
		<div className="gs-analysis-pie-detail">
			{ subPoints && subPoints.length > 0 ? (
				<>
					<button
						className={ `gs-analysis-pie-detail__header ${
							isOpen ? 'is-open' : 'is-closed'
						}` }
						onClick={ () => setIsOpen( ! isOpen ) }
						aria-expanded={ isOpen }
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="16"
							height="16"
							fill="currentColor"
							viewBox="0 0 16 16"
						>
							<path
								fillRule="evenodd"
								d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
							></path>
						</svg>
						{ mainDetail }
					</button>
					<div
						className={ `gs-analysis-pie-detail__subpoints ${
							isOpen ? 'is-open' : 'is-closed'
						}` }
					>
						{ subPoints.map( ( point, index ) => (
							<>
								{ point.onClick ? (
									<button
										key={ index }
										className="gs-analysis-pie-detail__subpoint"
										onClick={ point.onClick }
									>
										<span className="gs-analysis-pie-detail__subpoint__label">
											{ point.label }
										</span>
										<span className="gs-analysis-pie-detail__subpoint__values">
											<span className="gs-analysis-pie-detail__subpoint__number">
												{ point.displayCount }
											</span>
											{ point.displayPercentage && (
												<span className="gs-analysis-pie-detail__subpoint__percentage">
													{ point.displayPercentage }
												</span>
											) }
										</span>
									</button>
								) : (
									<div
										key={ index }
										className="gs-analysis-pie-detail__subpoint"
									>
										<span className="gs-analysis-pie-detail__subpoint__label">
											{ point.label }
										</span>
										<span className="gs-analysis-pie-detail__subpoint__values">
											<span className="gs-analysis-pie-detail__subpoint__number">
												{ point.displayCount }
											</span>
											{ point.displayPercentage && (
												<span className="gs-analysis-pie-detail__subpoint__percentage">
													{ point.displayPercentage }
												</span>
											) }
										</span>
									</div>
								) }
							</>
						) ) }
					</div>
				</>
			) : (
				<div className="gs-analysis-pie-detail__header">
					{ mainDetail }
				</div>
			) }
		</div>
	);
}