import React, { useState } from 'react';
import Typography from '@mui/material/Typography';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import { useDragOver, NodeModel } from '@minoru/react-dnd-treeview';
import styles from '../../../styles/customNode.module.css';
import EditIcon from '@mui/icons-material/Edit';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import { deleteToast } from '@/lib/toast';

interface MenuItemMobileData {
    text?: string;
    id?: number;
    parent?: number;
    droppable?: boolean;
    url_path?: string;
    class_name?: string;
    is_active?: boolean;
    order_id?: number;
    class_text?: string | null;
}

type MenuItemMobile = NodeModel<MenuItemMobileData>;

interface CustomNodeMobileProps {
    node: MenuItemMobile;
    depth: number;
    isOpen: boolean;
    onToggle: (id: string | number) => void;
    onTextChange: (id: string | number, value: string) => void;
    onDelete: (id: string | number) => void;
    onEdit: (id: string | number) => void;
    onCreateChild?: (parentId: string | number) => void;
}

export const CustomNodeMobile = (props: CustomNodeMobileProps) => {
    if (!props || !props.node) {
        return null;
    }

    const { id } = props.node;
    const indent = props.depth * 24;
    const [hover, setHover] = useState(false);

    const handleToggle = (e: React.MouseEvent) => {
        e.stopPropagation();
        props.onToggle(props.node.id);
    };

    const handleDelete = (e: React.MouseEvent) => {
        e.stopPropagation();
        deleteToast('Apakah Anda yakin ingin menghapus menu ini?').then((result) => {
            if (result) {
                props.onDelete(id);
            }
        });
    };

    const handleEdit = (e: React.MouseEvent) => {
        e.stopPropagation();
        props.onEdit(id);
    };

    const handleCreateChild = (e: React.MouseEvent) => {
        e.stopPropagation();
        if (props.onCreateChild) {
            props.onCreateChild(id);
        }
    };

    const dragOverProps = useDragOver(id, props.isOpen, props.onToggle);

    return (
        <div className={`tree-node ${styles.root}`} style={{ marginLeft: indent + 'px' }} {...dragOverProps}>
            <div className={`${styles.expandIconWrapper} ${props.isOpen ? styles.isOpen : ''}`}>
                {props.node.droppable && (
                    <div onClick={handleToggle} style={{ cursor: 'pointer' }}>
                        <ArrowRightIcon style={{ fontSize: '16px' }} />
                    </div>
                )}
            </div>
            <div className={styles.labelGridItem}>
                <div className={styles.baseWrapper} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
                    <Typography variant="body2" className={styles.nodeLabel} onClick={handleToggle}>
                        {props.node.text}
                    </Typography>
                    {hover && (
                        <div className="flex gap-1">
                            <IconButton className={styles.editButton} onClick={handleCreateChild} size="small" title="Add Child">
                                <AddIcon className={styles.addIcon} />
                            </IconButton>
                            <IconButton className={styles.editButton} onClick={handleEdit} size="small" title="Edit">
                                <EditIcon className={styles.editIcon} />
                            </IconButton>
                            <IconButton className={styles.editButton} onClick={handleDelete} size="small" title="Delete">
                                <DeleteIcon className={styles.deleteIcon} />
                            </IconButton>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

const CustomNodePage = () => {
    return <div>CustomNode Component</div>;
};

export default CustomNodePage;