import { __ } from '@wordpress/i18n';
import { Block } from '@/components/Blocks/Block';
import { BlockHeading } from '@/components/Blocks/BlockHeading';
import { BlockContent } from '@/components/Blocks/BlockContent';
import InsightsHeader from './InsightsHeader';
import { useInsightsStore } from '../../store/useInsightsStore';
import InsightsGraph from './InsightsGraph';
import { useDate } from '../../store/useDateStore';
import { useQuery } from '@tanstack/react-query';
import getInsightsData from '../../api/getInsightsData';
import { useFilters } from '@/hooks/useFilters';

const InsightsBlock = () => {
	const metrics = useInsightsStore( ( state ) => state.getMetrics() );
	const { startDate, endDate, range } = useDate( ( state ) => state );
	const { filters } = useFilters();
	const args = { filters, metrics };

	const query = useQuery({
		queryKey: [ 'insights', metrics, startDate, endDate, args ],
		queryFn: () => getInsightsData({ startDate, endDate, range, args }),
		placeholderData: {
			labels: [ '-', '-', '-', '-', '-', '-', '-' ],
			datasets: [
				{
					data: [ 0, 0, 0, 0, 0, 0, 0 ],
					backgroundColor: 'rgba(41, 182, 246, 0.2)',
					borderColor: 'rgba(41, 182, 246, 1)',
					label: '-',
					fill: 'false'
				},
				{
					data: [ 0, 0, 0, 0, 0, 0, 0 ],
					backgroundColor: 'rgba(244, 191, 62, 0.2)',
					borderColor: 'rgba(244, 191, 62, 1)',
					label: '-',
					fill: 'false'
				}
			]
		}
	});

	const loading = query.isLoading || query.isFetching;
	return (
		<Block className="row-span-1 lg:col-span-12 xl:col-span-6 min-h-96 group/root">
			<BlockHeading
				title={__( 'Insights', 'burst-statistics' )}
				className="border-b border-gray-200"
				controls={
					<InsightsHeader
						selectedMetrics={metrics}
						filters={filters}
					/>
				}
			/>
			<BlockContent>
				{query.data && InsightsGraph && (
					<InsightsGraph loading={loading} data={query.data} />
				)}
			</BlockContent>
		</Block>
	);
};

export default InsightsBlock;
