import { useEffect } from 'react';
import { Block } from '@/components/Blocks/Block';
import { BlockHeading } from '@/components/Blocks/BlockHeading';
import { BlockContent } from '@/components/Blocks/BlockContent';
import { BlockFooter } from '@/components/Blocks/BlockFooter';
import { __ } from '@wordpress/i18n';
import Tasks from './Tasks';
import ButtonInput from '@/components/Inputs/ButtonInput';
import { useNonPersistedTabsStore } from '@/store/useTabsStore';
import LiveTraffic from '@/components/Dashboard/LiveTraffic';
import { TabsContent, TabsList } from '@/components/Common/Tabs';

/**
 * OverviewBlock component to display tasks overview
 *
 * @return { React.ReactElement } OverviewBlock component
 */
const OverviewBlock = () => {
	const tabGroup = 'dashboard-overview';
	const activeTab = useNonPersistedTabsStore( ( state ) =>
		state.getActiveTab( 'dashboard-overview' )
	);
	const setActiveTab = useNonPersistedTabsStore(
		( state ) => state.setActiveTab
	);
	useEffect(

		/**
		 * Set default active tab to 'activity' on mount.
		 */
		() => {
			setActiveTab( tabGroup, 'activity' );
		},
		[] // eslint-disable-line react-hooks/exhaustive-deps
	);
	const tabConfig = [
		{
			id: 'activity',
			title: __( 'Activity', 'burst-statistics' )
		},
		{
			id: 'live-visitors',
			title: __( 'Live visitors', 'burst-statistics' )
		}
	];

	return (
		<Block className="row-span-2 @lg:col-span-12 @xl:col-span-6">
			<BlockHeading
				title={__( 'Overview', 'burst-statistics' )}
				className="border-b border-gray-200"
				controls={
					<TabsList tabConfig={tabConfig} tabGroup={tabGroup} />
				}
			/>

			<BlockContent className="px-0 py-0 border-b border-gray-200">
				{
					'activity' === activeTab && (
						<TabsContent className="bg-blue-50 burst-scroll px-2.5 md:px-6 py-8 h-[305px] overflow-y-auto rounded-none" group={tabGroup} id="activity">
							<Tasks />
						</TabsContent>
					)
				}

				{
					'live-visitors' === activeTab && (
						<TabsContent className="bg-green-50 burst-scroll px-2.5 md:px-6 py-8 h-[305px] overflow-y-auto rounded-none" group={tabGroup} id="live-visitors">
							<LiveTraffic />
						</TabsContent>
					)
				}
			</BlockContent>

			<BlockFooter className="gap-2">
				<ButtonInput btnVariant={'tertiary'} link={{ to: '/statistics' }}>
					{__( 'View my statistics', 'burst-statistics' )}
				</ButtonInput>
			</BlockFooter>
		</Block>
	);
};

export default OverviewBlock;
