import './AlertDetails.styles.scss';

import { Breadcrumb, Button, Divider } from 'antd';
import logEvent from 'api/common/logEvent';
import { Filters } from 'components/AlertDetailsFilters/Filters';
import NotFound from 'components/NotFound';
import RouteTab from 'components/RouteTab';
import Spinner from 'components/Spinner';
import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes';
import { useNotifications } from 'hooks/useNotifications';
import { useSafeNavigate } from 'hooks/useSafeNavigate';
import useUrlQuery from 'hooks/useUrlQuery';
import history from 'lib/history';
import { useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';

import AlertHeader from './AlertHeader/AlertHeader';
import { useGetAlertRuleDetails, useRouteTabUtils } from './hooks';
import { AlertDetailsStatusRendererProps } from './types';

function AlertDetailsStatusRenderer({
	isLoading,
	isError,
	isRefetching,
	data,
}: AlertDetailsStatusRendererProps): JSX.Element {
	const alertRuleDetails = useMemo(() => data?.payload?.data, [data]);
	const { t } = useTranslation('common');

	if (isLoading || isRefetching) {
		return <Spinner tip="Loading..." />;
	}

	if (isError) {
		return <div>{data?.error || t('something_went_wrong')}</div>;
	}

	return <AlertHeader alertDetails={alertRuleDetails} />;
}

function BreadCrumbItem({
	title,
	isLast,
	route,
}: {
	title: string | null;
	isLast?: boolean;
	route?: string;
}): JSX.Element {
	if (isLast) {
		return <div className="breadcrumb-item breadcrumb-item--last">{title}</div>;
	}
	const handleNavigate = (): void => {
		if (!route) {
			return;
		}
		history.push(ROUTES.LIST_ALL_ALERT);
	};

	return (
		<Button type="text" className="breadcrumb-item" onClick={handleNavigate}>
			{title}
		</Button>
	);
}

BreadCrumbItem.defaultProps = {
	isLast: false,
	route: '',
};

function AlertDetails(): JSX.Element {
	const { pathname } = useLocation();
	const { routes } = useRouteTabUtils();
	const urlQuery = useUrlQuery();
	const { safeNavigate } = useSafeNavigate();
	const { notifications } = useNotifications();

	const {
		isLoading,
		isRefetching,
		isError,
		ruleId,
		isValidRuleId,
		alertDetailsResponse,
	} = useGetAlertRuleDetails();

	useEffect(() => {
		const alertTitle = alertDetailsResponse?.payload?.data.alert;
		document.title = alertTitle || document.title;
	}, [alertDetailsResponse?.payload?.data.alert, isRefetching]);

	useEffect(() => {
		if (alertDetailsResponse?.payload?.data?.id) {
			const ruleUUID = alertDetailsResponse.payload.data.id;
			if (ruleId !== ruleUUID) {
				urlQuery.set(QueryParams.ruleId, ruleUUID);
				const generatedUrl = `${window.location.pathname}?${urlQuery}`;
				notifications.info({
					message:
						"We're transitioning alert rule IDs from integers to UUIDs.Both old and new alert links will continue to work after this change - existing notifications using integer IDs will remain functional while new alerts will use the UUID format. Please use the updated link in the URL for future references",
				});
				safeNavigate(generatedUrl);
			}
		}
	}, [
		alertDetailsResponse?.payload?.data.id,
		notifications,
		ruleId,
		safeNavigate,
		urlQuery,
	]);

	if (
		isError ||
		!isValidRuleId ||
		(alertDetailsResponse && alertDetailsResponse.statusCode !== 200)
	) {
		return <NotFound />;
	}

	const handleTabChange = (route: string): void => {
		if (route === ROUTES.ALERT_HISTORY) {
			logEvent('Alert History tab: Visited', { ruleId });
		}
	};

	return (
		<div className="alert-details">
			<Breadcrumb
				className="alert-details__breadcrumb"
				items={[
					{
						title: (
							<BreadCrumbItem title="Alert Rules" route={ROUTES.LIST_ALL_ALERT} />
						),
					},
					{
						title: <BreadCrumbItem title={ruleId} isLast />,
					},
				]}
			/>
			<Divider className="divider breadcrumb-divider" />

			<AlertDetailsStatusRenderer
				{...{ isLoading, isError, isRefetching, data: alertDetailsResponse }}
			/>
			<Divider className="divider" />
			<div className="tabs-and-filters">
				<RouteTab
					routes={routes}
					activeKey={pathname}
					history={history}
					onChangeHandler={handleTabChange}
					tabBarExtraContent={<Filters />}
				/>
			</div>
		</div>
	);
}

export default AlertDetails;
