import { memo, useMemo } from "react";

import IconDelete from "virtual:icons/mdi/close-thick";
import IconFileImage from "virtual:icons/mdi/file-image";
import IconFileMusic from "virtual:icons/mdi/file-music";
import IconFileText from "virtual:icons/mdi/file-text";
import IconFileVideo from "virtual:icons/mdi/file-video";
import IconPreview from "virtual:icons/mdi/open-in-new";

import "./ChatFile.scss";

interface ChatFileProps {
	file: File;
	isRemovable: boolean;
	isPreviewable?: boolean;
	onRemove?: (file: File) => void;
}

const typeIconMap = {
	document: IconFileText,
	audio: IconFileMusic,
	image: IconFileImage,
	video: IconFileVideo,
} as const;

function ChatFileComponent({
	file,
	isRemovable,
	isPreviewable,
	onRemove,
}: ChatFileProps) {
	const TypeIcon = useMemo(() => {
		const typePrefix = file?.type.split("/")[0] as keyof typeof typeIconMap;
		return typeIconMap[typePrefix] ?? IconFileText;
	}, [file]);

	const handlePreview = () => {
		if (!isPreviewable) return;
		const url = URL.createObjectURL(file);
		window.open(url, "_blank", "noopener,noreferrer");
	};

	const handleRemove = (event: React.MouseEvent) => {
		event.stopPropagation();
		onRemove?.(file);
	};

	return (
		<div className="chat-file" onClick={handlePreview}>
			<TypeIcon />
			<p className="chat-file-name">{file.name}</p>
			{isRemovable ? (
				<button
					className="chat-file-delete"
					type="button"
					onClick={handleRemove}
					aria-label="Remove file"
				>
					<IconDelete />
				</button>
			) : (
				isPreviewable && <IconPreview className="chat-file-preview" />
			)}
		</div>
	);
}

export default memo(ChatFileComponent);