/**
 * WordPress dependencies
 */
import { useSelect } from '@safe-wordpress/data';

/**
 * External dependencies
 */
import clsx from 'clsx';
import {
	store as NC_CALENDAR,
	useSidePane,
	useFirstDay,
	useNumberOfVisibleDays,
} from '@nelio-content/calendar';

/**
 * Internal dependencies
 */
import { DayGrid } from './day-grid';
import { AgendaGrid } from './agenda-grid';

export const Grid = (): JSX.Element => {
	const calendarMode = useSelect(
		( select ) => select( NC_CALENDAR ).getCalendarMode(),
		[]
	);

	const sidePane = useSidePane();
	const firstDay = useFirstDay();
	const numberOfDays = useNumberOfVisibleDays();

	const className = clsx( {
		'nelio-content-calendar__grid': true,
		'nelio-content-calendar__grid--has-sidebar': 'none' !== sidePane,
		[ `nelio-content-calendar__grid--has-${ sidePane }-sidebar` ]:
			'none' !== sidePane,
	} );

	return calendarMode === 'agenda' ? (
		<AgendaGrid className={ className } firstDay={ firstDay } />
	) : (
		<DayGrid
			className={ className }
			firstDay={ firstDay }
			numberOfDays={ numberOfDays }
		/>
	);
};