import { CheckField, Tooltip } from "@ax/components";
import { getFormattedDateWithTimezone, getSlugFromUrl } from "@ax/helpers";
import type { IDataSource, IStructuredDataContent } from "@ax/types";

import * as S from "./style";

const Item = (props: IProps) => {
	const { handleOnClick, item, isChecked, source, disabled, tooltip } = props;

	const handleItemClick = (e: React.MouseEvent<HTMLLIElement>) => {
		e.preventDefault();
		if (!disabled) handleOnClick(item);
	};

	return (
		<Tooltip content={tooltip} bottom>
			<S.Item onClick={handleItemClick} data-testid="manual-panel-item" disabled={disabled}>
				<CheckField name="check" value={item.id} checked={isChecked} disabled={disabled} />
				<S.TextWrapper>
					<S.Header>
						<S.Type>{source.title.toUpperCase()}</S.Type>
						{item.modified && <S.Date>{getFormattedDateWithTimezone(item.modified, "d MMM Y")}</S.Date>}
					</S.Header>
					<S.Title>{item.content.title}</S.Title>
					<S.Slug>{getSlugFromUrl(item.relatedPage?.url)}</S.Slug>
				</S.TextWrapper>
			</S.Item>
		</Tooltip>
	);
};

interface IProps {
	handleOnClick: (item: IStructuredDataContent) => void;
	item: IStructuredDataContent;
	isChecked: boolean;
	source: IDataSource;
	disabled: boolean;
	tooltip: string;
}

export default Item;
