/**
 * WordPress dependencies
 */
import { dispatch, select, subscribe } from '@safe-wordpress/data';

/**
 * External dependencies
 */
import { debounce } from 'lodash';
import { store as NC_CALENDAR } from '@nelio-content/calendar';
import { elementReady } from '@nelio-content/utils';

export function makeGridResizable(): void {
	listenToSidebar();
	listenToWindowResize();
	listenToCalendarModeChange();
	elementReady( '.nelio-content-calendar__grid', fixCalendar );
}

// =======
// HELPERS
// =======

function listenToSidebar() {
	const collapseButton = document.getElementById( 'collapse-button' );
	if ( ! collapseButton ) {
		return;
	}

	collapseButton.addEventListener( 'click', debounce( fixCalendar, 50 ) );
	collapseButton.addEventListener( 'click', debounce( fixCalendar, 250 ) );
}

function listenToWindowResize() {
	window.addEventListener( 'resize', debounce( fixCalendar, 250 ) );
}

function listenToCalendarModeChange() {
	let prevCalendarMode = select( NC_CALENDAR ).getCalendarMode();
	// eslint-disable-next-line @typescript-eslint/no-unsafe-call
	subscribe( () => {
		const calendarMode = select( NC_CALENDAR ).getCalendarMode();
		if ( calendarMode === prevCalendarMode ) {
			return;
		}
		prevCalendarMode = calendarMode;
		fixCalendar();
	}, NC_CALENDAR );
}

function fixCalendar(): void {
	const grid: HTMLElement | null = document.querySelector(
		'.nelio-content-calendar__grid'
	);
	if ( ! grid ) {
		return;
	}

	grid.style.display = 'none';
	const height = getBodyHeight();
	grid.removeAttribute( 'style' );

	const topbar: HTMLElement | null = document.getElementById( 'wpadminbar' );
	const header: HTMLElement | null = document.querySelector(
		'.nelio-content-calendar__header'
	);
	const weekdays: HTMLElement | null = document.querySelector(
		'.nelio-content-grid__header'
	);
	const gridRowHeight =
		height -
		getHeight( topbar ) -
		getHeight( header ) -
		getHeight( weekdays );

	const calendarMode = select( NC_CALENDAR ).getCalendarMode();
	const { setCalendarDimensions } = dispatch( NC_CALENDAR );
	switch ( calendarMode ) {
		case 'agenda':
			return void setCalendarDimensions( {
				adminSidebarWidth: getAdminSidebarWidth(),
				calendarWidth: getCalendarWidth(),
				minRowHeight: gridRowHeight / 6 - 1,
			} );
		case 'month':
			return void setCalendarDimensions( {
				adminSidebarWidth: getAdminSidebarWidth(),
				calendarWidth: getCalendarWidth(),
				minRowHeight: gridRowHeight / 6 - 1,
			} );

		case 'two-weeks':
			return void setCalendarDimensions( {
				adminSidebarWidth: getAdminSidebarWidth(),
				calendarWidth: getCalendarWidth(),
				minRowHeight: gridRowHeight / 2 - 1,
			} );

		default:
			return void setCalendarDimensions( {
				adminSidebarWidth: getAdminSidebarWidth(),
				calendarWidth: getCalendarWidth(),
				minRowHeight: gridRowHeight - 1,
			} );
	}
}

function getAdminSidebarWidth() {
	const sidebar = document.getElementById( 'adminmenu' );
	if ( ! sidebar ) {
		return 0;
	}
	return Math.round( sidebar.getBoundingClientRect().width );
}

function getCalendarWidth() {
	const calendar = document.getElementById( 'nelio-content-page' );
	if ( ! calendar ) {
		return 0;
	}
	return Math.round( calendar.getBoundingClientRect().width );
}

function getBodyHeight() {
	const body = document.body;
	const html = document.documentElement;
	return Math.max(
		body.scrollHeight,
		body.offsetHeight,
		html.clientHeight,
		html.scrollHeight,
		html.offsetHeight
	);
}

function getHeight( el: HTMLElement | null ) {
	if ( ! el ) {
		return 0;
	}
	return el.getBoundingClientRect().height;
}