import { __ } from '@wordpress/i18n';
import type { JSX } from 'react';
import { problemOf } from '../../shared/links/problem';
import { LoadError } from '../../shared/ui/LoadError';
import { Overlay } from '../../shared/ui/Overlay';
import { Skeleton } from '../../shared/ui/Skeleton';
import { FixContent } from './FixContent';
import { FixPanelHead } from './FixPanelHead';
import { FIX_PANEL_TITLE_ID } from './fixPanelTitle';
import { useLink } from './linkDetailQueries';

type FixPanelProps = {
	linkId: number;
	onClosed: () => void;
};

export function FixPanel( { linkId, onClosed }: FixPanelProps ): JSX.Element {
	const linkQuery = useLink( linkId );
	const link = linkQuery.data;

	return (
		<Overlay
			kind="drawer"
			labelledBy={ FIX_PANEL_TITLE_ID }
			onClosed={ onClosed }
		>
			<aside className="drawer">
				<FixPanelHead
					problem={ link === undefined ? null : problemOf( link ) }
				/>
				{ link !== undefined && (
					<FixContent key={ link.id } link={ link } />
				) }
				{ link === undefined && (
					<div className="drawer-body">
						<h2 className="sr" id={ FIX_PANEL_TITLE_ID }>
							{ __( 'Fix a link', 'aiplaz-link-checkup' ) }
						</h2>
						{ linkQuery.isError ? (
							<LoadError
								error={ linkQuery.error }
								onRetry={ () => {
									void linkQuery.refetch();
								} }
							/>
						) : (
							<Skeleton />
						) }
					</div>
				) }
			</aside>
		</Overlay>
	);
}