import { Container, Title, Tabs, Text } from '@bsf/force-ui';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { cn } from '@/functions/utils';
import ContentAnalysisTable from './content-analysis-table';
import Section from './section';
import { STORE_NAME } from '@/admin-store/constants';
import { useSelect } from '@wordpress/data';
import EmptyContentGap from './empty-content-gap';
import {
	CONTENT_PERFORMANCE_TABS,
	CONTENT_PERFORMANCE_TABS_COUNT,
} from './content-analysis/constants';

const ContentPerformance = () => {
	const [ activeTab, setActiveTab ] = useState( 'analysis' );

	// Get search consolee data
	const {
		contentPerformance = [],
		authenticated,
		hasSiteSelected,
	} = useSelect( ( select ) => select( STORE_NAME ).getSearchConsole() );

	// Displaying the last 90 days badge only when the user is authenticated,
	const Show_Period_Badge =
		authenticated && hasSiteSelected && contentPerformance.length > 0;

	return (
		<Section>
			<Tabs activeItem={ activeTab }>
				<Container
					justify="between"
					align="center"
					className="py-2 pl-2 pr-3 flex-wrap md:flex-nowrap"
				>
					<Container align="center" className="gap-2">
						<Title
							title={ __( 'Content Analysis', 'surerank' ) }
							tag="h4"
							size="md"
						/>

						{ Show_Period_Badge && (
							<Text size={ 16 } weight={ 400 } color="secondary">
								{ __( '(Last 90 days)', 'surerank' ) }
							</Text>
						) }
					</Container>
					{ CONTENT_PERFORMANCE_TABS_COUNT > 1 && (
						<Container.Item className="w-fit block">
							<Tabs.Group
								activeItem={ activeTab }
								onChange={ ( { value: { slug } } ) => {
									setActiveTab( slug );
								} }
								size="sm"
								variant="rounded"
							>
								{ Object.entries(
									CONTENT_PERFORMANCE_TABS
								).map( ( [ key, tab ] ) => (
									<Tabs.Tab
										key={ key }
										slug={ key }
										text={ tab.label }
										className={ cn(
											'w-fit text-nowrap space-x-1.5',
											activeTab === key &&
												'text-brand-800 hover:text-brand-800'
										) }
										badge={ null }
										disabled={ tab.disabled }
									/>
								) ) }
							</Tabs.Group>
						</Container.Item>
					) }
				</Container>
				<Tabs.Panel slug="analysis">
					<ContentAnalysisTable />
				</Tabs.Panel>
				<Tabs.Panel slug="gap">
					<EmptyContentGap />
				</Tabs.Panel>
			</Tabs>
		</Section>
	);
};

export default ContentPerformance;