import React, { useState } from "react";
import { CheckField, ElementsTooltip, Tooltip } from "@ax/components";
import { IActionMenuOption, ICheck, IImage } from "@ax/types";
import { formatBytes, getFileExtension, trimText } from "@ax/helpers";
import { useModal } from "@ax/hooks";

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

import * as S from "./style";

const ListItem = (props: IProps) => {
	const {
		image,
		isSelected,
		currentFolderID,
		isAllowedToDelete,
		isAllowedToEdit,
		isAllowedToMove,
		hoverCheck,
		onChange,
		onClick,
		onDelete,
		onMove,
	} = props;
	const { id, tags, name, size, width, height, folderId } = image;
	const imageType = getFileExtension(image.name);

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

	const handleChange = (value: ICheck) => onChange(value);
	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 };

	const FileTitle = () => (name.length > 50 ? <Tooltip content={name}>{trimText(name, 50)}</Tooltip> : <>{name}</>);

	return (
		<>
			<S.ItemRow role="rowgroup" selected={isSelected}>
				<S.CheckCell role="cell">
					<CheckField name="check" value={id} checked={isSelected || hoverCheck} onChange={handleChange} />
				</S.CheckCell>
				<S.ThumbCell role="cell" onClick={handleClick}>
					<S.ThumbWrapper>
						<img src={image.thumb} alt={image.alt} />
					</S.ThumbWrapper>
				</S.ThumbCell>
				<S.NameCell role="cell" onClick={handleClick} data-testid="file-name-cell">
					<FileTitle />
				</S.NameCell>
				<S.TypeCell role="cell" onClick={handleClick}>
					<S.FileType>{imageType}</S.FileType>
				</S.TypeCell>
				<S.SizeCell role="cell" onClick={handleClick}>
					{formatBytes(size)}
				</S.SizeCell>
				<S.UpdatedCell role="cell" onClick={handleClick}>
					{`${width}x${height}`}
				</S.UpdatedCell>
				<S.TagsCell role="cell" onClick={handleClick}>
					{tags.length > 0 && (
						<ElementsTooltip
							elements={tags}
							elementsPerRow={3}
							defaultElements={3}
							rounded={true}
							defaultColor="#FFBB37"
							prefix="#"
							size="M"
						/>
					)}
				</S.TagsCell>
				<S.ActionsCell role="cell">
					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
				</S.ActionsCell>
			</S.ItemRow>
			{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(file: IImage): void;
	onDelete(fileID: number): void;
	onMove(fileID: number, folderID: number | "root"): void;
	hoverCheck: boolean;
}

export default ListItem;
