import { CheckField } from "@ax/components";
import type { IPage } from "@ax/types";
import { format } from "date-fns";

import * as S from "./style";

const PageItem = (props: IPageItemProps): JSX.Element => {
	const { page, structuredDataID, isSelected, addToBulk } = props;
	const { id, title, modified, slug } = page;

	const handleClick = () => addToBulk({ value: id, isChecked: !isSelected });

	const handleKeyDown = (e: React.KeyboardEvent) => {
		if (e.key === "Enter") {
			handleClick();
		}
	};

	return (
		<S.PageItem role="button" onClick={handleClick} onKeyDown={handleKeyDown} tabIndex={0} data-testid="page-item">
			<S.Check>
				<CheckField name="check" value={id} checked={isSelected} onChange={addToBulk} tabIndex={-1} />
			</S.Check>
			<S.PageInfo>
				<S.Header>
					<S.Type>{structuredDataID}</S.Type>
					<S.DateWrapper>{format(new Date(modified), "dd MMM yy")}</S.DateWrapper>
				</S.Header>
				<S.Title>{title}</S.Title>
				<S.FullUrl>{slug}</S.FullUrl>
			</S.PageInfo>
		</S.PageItem>
	);
};

interface IPageItemProps {
	page: IPage;
	structuredDataID: string;
	isSelected: boolean;
	addToBulk(item: { value: any; isChecked: boolean }): void;
}

export default PageItem;
