import { useEffect, useRef } from '@wordpress/element';
import {
	BarController,
	BarElement,
	CategoryScale,
	Chart,
	Legend,
	LinearScale,
	LineController,
	LineElement,
	PointElement,
	Tooltip,
} from 'chart.js';

import type { AnalyticsDay } from './types';

Chart.register(
	BarController,
	BarElement,
	CategoryScale,
	Legend,
	LinearScale,
	LineController,
	LineElement,
	PointElement,
	Tooltip
);

interface AnalyticsChartProps {
	days: AnalyticsDay[];
	mode?: 'activity' | 'conversions';
}

export function AnalyticsChart( {
	days,
	mode = 'activity',
}: AnalyticsChartProps ) {
	const canvas = useRef< HTMLCanvasElement | null >( null );

	useEffect( () => {
		if ( ! canvas.current ) {
			return undefined;
		}

		const labels = days.map( ( day ) =>
			new Intl.DateTimeFormat( undefined, {
				month: 'short',
				day: 'numeric',
				timeZone: 'UTC',
			} ).format( new Date( day.date + 'T00:00:00Z' ) )
		);
		const chart =
			mode === 'activity'
				? new Chart( canvas.current, {
						type: 'line',
						data: {
							labels,
							datasets: [
								{
									label: 'Impressions',
									data: days.map(
										( day ) => day.impressions
									),
									borderColor: '#6955e8',
									backgroundColor: '#6955e8',
									tension: 0.3,
								},
								{
									label: 'Clicks',
									data: days.map( ( day ) => day.clicks ),
									borderColor: '#12b76a',
									backgroundColor: '#12b76a',
									tension: 0.3,
								},
								{
									label: 'Add to carts',
									data: days.map(
										( day ) => day.add_to_carts || 0
									),
									borderColor: '#f79009',
									backgroundColor: '#f79009',
									tension: 0.3,
								},
								{
									label: 'Checkout starts',
									data: days.map(
										( day ) => day.checkout_starts || 0
									),
									borderColor: '#0ba5ec',
									backgroundColor: '#0ba5ec',
									tension: 0.3,
								},
							],
						},
						options: {
							animation: false,
							maintainAspectRatio: false,
							responsive: true,
							scales: { y: { beginAtZero: true } },
						},
				  } )
				: new Chart( canvas.current, {
						type: 'bar',
						data: {
							labels,
							datasets: [
								{
									label: 'Attributed orders',
									data: days.map(
										( day ) => day.attributed_orders || 0
									),
									backgroundColor: '#f79009',
									yAxisID: 'y',
								},
								{
									type: 'line',
									label: 'Attributed net revenue',
									data: days.map(
										( day ) => day.attributed_revenue || 0
									),
									borderColor: '#6955e8',
									backgroundColor: '#6955e8',
									tension: 0.3,
									yAxisID: 'revenue',
								},
							],
						},
						options: {
							animation: false,
							maintainAspectRatio: false,
							responsive: true,
							scales: {
								y: {
									beginAtZero: true,
									position: 'left',
								},
								revenue: {
									beginAtZero: true,
									grid: { drawOnChartArea: false },
									position: 'right',
								},
							},
						},
				  } );

		return () => chart.destroy();
	}, [ days, mode ] );

	const label =
		mode === 'activity'
			? 'Daily notification impressions and clicks'
			: 'Daily attributed orders and net revenue';

	return (
		<div className="voidpulse-chart">
			<canvas ref={ canvas } role="img" aria-label={ label } />
		</div>
	);
}
