import { useLayoutEffect } from "react";
import { connect } from "react-redux";
import { type RouteComponentProps, withRouter } from "react-router-dom";

import { appActions } from "@ax/containers/App";
import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
import { sitesActions } from "@ax/containers/Sites";
import { structuredDataActions } from "@ax/containers/StructuredData";
import { usersActions } from "@ax/containers/Users";
import type { IGetRoles, ILanguage, IRootState, ISite } from "@ax/types";

import SitesList from "./SitesList";

const Sites = (props: ISitesProps): JSX.Element => {
	const {
		token,
		setCurrentSiteInfo,
		getStructuredData,
		setLanguage,
		getAllDataPacks,
		globalLangs,
		getRoles,
		updateCurrentSearch,
		resetCurrentData,
		setIsLoading,
		getUserCurrentPermissions,
		getAllSites,
	} = props;

	useLayoutEffect(() => {
		const fetchInitialData = async () => {
			setIsLoading(true);
			setCurrentSiteInfo(null);
			updateCurrentSearch("");
			resetCurrentData();
			await getRoles({ siteId: "global" }, token);
			await getUserCurrentPermissions();
			await getStructuredData(token, null);
			await getAllDataPacks();
			getAllSites();

			const defaultLanguage = globalLangs.find((language) => language.isDefault);
			if (defaultLanguage) {
				const { locale, id } = defaultLanguage;
				setLanguage({ locale, id });
			}
			setIsLoading(false);
		};

		fetchInitialData();
	}, [
		token,
		globalLangs,
		setIsLoading,
		setCurrentSiteInfo,
		updateCurrentSearch,
		resetCurrentData,
		getRoles,
		getUserCurrentPermissions,
		getStructuredData,
		getAllDataPacks,
		setLanguage,
		getAllSites,
	]);

	return <SitesList />;
};

const mapStateToProps = (state: IRootState) => ({
	token: state.app.token,
	globalLangs: state.app.globalLangs,
});

interface IStateProps {
	token: string;
	globalLangs: ILanguage[];
}

interface IDispatchProps {
	setCurrentSiteInfo(currentSiteInfo: ISite | null): void;
	getStructuredData(token: string, siteId?: number | null, hasLoading?: boolean): Promise<void>;
	setLanguage(lang: { locale: string; id: number | null }): void;
	getAllDataPacks: () => Promise<void>;
	getRoles: (params: IGetRoles, token?: string) => Promise<void>;
	updateCurrentSearch(query: string): Promise<void>;
	resetCurrentData(): void;
	setIsLoading(isLoading: boolean): void;
	getUserCurrentPermissions(): Promise<void>;
	getAllSites: () => Promise<void>;
}

export type ISitesProps = IStateProps & IDispatchProps & RouteComponentProps;

const mapDispatchToProps = {
	setCurrentSiteInfo: sitesActions.setCurrentSiteInfo,
	getStructuredData: structuredDataActions.getStructuredData,
	setLanguage: appActions.setLanguage,
	getAllDataPacks: dataPacksActions.getAllDataPacks,
	getRoles: usersActions.getRoles,
	updateCurrentSearch: structuredDataActions.updateCurrentSearch,
	resetCurrentData: structuredDataActions.resetCurrentData,
	setIsLoading: appActions.setIsLoading,
	getUserCurrentPermissions: usersActions.getUserCurrentPermissions,
	getAllSites: sitesActions.getAllSites,
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sites));
