import React, { useState } from "react";
import { Icon } from "@ax/components";
import { IActionMenuOption, ICheck, IImage } from "@ax/types";
import { useModal } from "@ax/hooks";

import { DeleteFileModal, MoveItemModal } from "../atoms";

import * as S from "./style";

const GridItem = (props: IProps) => {
	const {
		image,
		isSelected,
		currentFolderID,
		isAllowedToDelete,
		isAllowedToEdit,
		isAllowedToMove,
		onChange,
		onClick,
		onDelete,
		onMove,
	} = props;

	const { id, name, thumb, alt, folderId } = image;

	const [selectedFolder, setSelectedFolder] = useState<number | null>(currentFolderID || null);
	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();

	const handleCheckClick = (isChecked: boolean) => (e: React.MouseEvent<HTMLDivElement>) => {
		e.stopPropagation();
		onChange({ value: id, isChecked });
	};

	const handleClick = () => onClick(image);

	let menuOptions: IActionMenuOption[] = [];

	if (isAllowedToEdit) {
		menuOptions = [
			{
				label: "Edit",
				icon: "edit",
				action: () => onClick(image),
			},
		];

		if (isAllowedToMove) {
			menuOptions = [
				...menuOptions,
				{
					label: "Move to...",
					icon: "change",
					action: () => toggleMoveModal(),
				},
			];
		}
	}

	if (isAllowedToDelete) {
		menuOptions = [
			...menuOptions,
			{
				label: "Delete",
				icon: "delete",
				action: () => toggleDeleteModal(),
			},
		];
	}

	const handleDeleteFile = () => {
		onDelete(id);
		isDeleteOpen && toggleDeleteModal();
	};

	const handleMoveFile = () => {
		if (folderId !== selectedFolder) {
			onMove(id, selectedFolder || "root");
			isMoveOpen && toggleMoveModal();
			setSelectedFolder(0);
		}
	};

	const handleModalClose = () => {
		setSelectedFolder(0);
		isMoveOpen && toggleMoveModal();
	};

	const mainDeleteModalAction = {
		title: "Delete image",
		onClick: () => handleDeleteFile(),
	};

	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };

	const mainMoveModalAction = {
		title: "Move",
		onClick: () => handleMoveFile(),
	};

	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };

	return (
		<>
			<S.ImageWrapper data-testid="image-item" onClick={handleClick} selected={isSelected}>
				<img src={thumb} alt={alt} />
				<S.IconWrapper onClick={handleCheckClick(isSelected ? false : true)}>
					<Icon name={isSelected ? "successSolid" : "emptyCheck"} size="24" />
				</S.IconWrapper>
				<S.StyledActionMenu icon="more" options={menuOptions} />
			</S.ImageWrapper>
			{isDeleteOpen && (
				<DeleteFileModal
					isOpen={isDeleteOpen}
					toggleModal={toggleDeleteModal}
					mainModalAction={mainDeleteModalAction}
					secondaryModalAction={secondaryDeleteModalAction}
					title={name}
				/>
			)}
			{isMoveOpen && (
				<MoveItemModal
					isOpen={isMoveOpen}
					toggleModal={handleModalClose}
					mainModalAction={mainMoveModalAction}
					secondaryModalAction={secondaryMoveModalAction}
					folder={selectedFolder}
					setFolder={setSelectedFolder}
					hideRoot={!folderId}
				/>
			)}
		</>
	);
};

interface IProps {
	image: IImage;
	isSelected: boolean;
	currentFolderID: number | null;
	isAllowedToEdit: boolean;
	isAllowedToDelete: boolean;
	isAllowedToMove: boolean;
	onChange(e: ICheck): void;
	onClick(image: IImage): void;
	onDelete(imageID: number): void;
	onMove(imageID: number, folderID: number | "root"): void;
}

export default GridItem;
