import type React from "react";
import { connect } from "react-redux";

import { CheckField, Icon, TruncatedTooltip } from "@ax/components";
import { formsActions } from "@ax/containers/Forms";
import { useModal, usePermission } from "@ax/hooks";
import type { FormCategory, ICheck } from "@ax/types";

import { useSortable } from "@dnd-kit/sortable";

import { DeleteModal } from "../atoms";
import CategoryPanel from "../CategoryPanel";

import * as S from "./style";

const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
	const { category, isSelected, hoverCheck, isDragging, isSiteView, deleteFormCategory, onChange, toggleToast } = props;

	const { isOpen, toggleModal } = useModal();
	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();

	const editFormCategoryPermission = isSiteView ? "forms.editFormsCategories" : "global.forms.editFormsCategoriesss";
	const deleteFormCategoryPermission = isSiteView
		? "forms.deleteFormsCategories"
		: "global.forms.deleteFormsCategories";
	const isAllowedToEditFormCategory = usePermission(editFormCategoryPermission);
	const isAllowedToDeleteFormCategory = usePermission(deleteFormCategoryPermission);

	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
		id: category.id,
	});

	const { content } = category;

	const handleClick = () => !isDragging && isAllowedToEditFormCategory && toggleModal();

	const handleCloseModal = () => {
		toggleModal();
	};

	const handleOnChange = (value: ICheck) => onChange(value);

	const handleCheckClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();

	const removeCategory = async () => {
		const deleted = await deleteFormCategory(category.id, category.categoryType);

		if (deleted) {
			isDeleteOpen && toggleDeleteModal();
			toggleToast("1 form category deleted");
		}
	};

	const menuOptions = isAllowedToDeleteFormCategory
		? [
				{
					label: "delete",
					icon: "delete",
					action: toggleDeleteModal,
				},
			]
		: [];

	const mainDeleteModalAction = {
		title: "delete",
		onClick: removeCategory,
	};

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

	return (
		<>
			<S.CategoryRow
				selected={isSelected}
				onClick={handleClick}
				ref={setNodeRef}
				cssTransform={transform}
				transition={transition}
				{...listeners}
				{...attributes}
			>
				<S.HandleCell>
					<S.IconWrapperDrag role="cell">
						<Icon name="drag" size="16" />
					</S.IconWrapperDrag>
				</S.HandleCell>
				<S.CheckCell role="cell" onClick={handleCheckClick}>
					<CheckField name="check" value={category.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
				</S.CheckCell>
				<S.NameCell role="cell" clickable={true}>
					<TruncatedTooltip content={content?.title || ""} expanded top={-5}>
						<S.Title>{content?.title || ""}</S.Title>
					</TruncatedTooltip>
				</S.NameCell>
				<S.CodeCell role="cell" clickable={true}>
					<TruncatedTooltip content={category.content.code} expanded top={-5}>
						<S.Code>{category.content.code}</S.Code>
					</TruncatedTooltip>
				</S.CodeCell>
				<S.ActionsCell role="cell">
					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
				</S.ActionsCell>
			</S.CategoryRow>
			{isOpen && (
				<CategoryPanel
					isOpen={isOpen}
					toggleModal={handleCloseModal}
					item={category}
					toggleToast={toggleToast}
					type={category.categoryType}
				/>
			)}
			{isDeleteOpen && (
				<DeleteModal
					isOpen={isDeleteOpen}
					toggleModal={toggleDeleteModal}
					mainModalAction={mainDeleteModalAction}
					secondaryModalAction={secondaryDeleteModalAction}
				/>
			)}
		</>
	);
};

interface IProps {
	category: FormCategory;
	isSelected: boolean;
	onChange: (e: any) => void;
	toggleToast(state: any): void;
	hoverCheck?: boolean;
	isDragging: boolean;
	isSiteView: boolean;
}

interface IDispatchProps {
	deleteFormCategory(id: number | number[], categoryType: string): Promise<boolean>;
}

type ICategoryItemProps = IProps & IDispatchProps;

const mapDispatchToProps = {
	deleteFormCategory: formsActions.deleteFormCategory,
};

export default connect(null, mapDispatchToProps)(CategoryItem);
