import React from "react";
import { TextField } from "@mui/material";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import styles from "./CategoryTreeItem.module.css";
import ListAltIcon from "@mui/icons-material/ListAlt";

export const CategoryTreeItem = (props) => {
    const { droppable, data } = props.node;
    const indent = props.depth * 40;

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

    return (
        <div
            className={`tree-node ${styles.root}`}
            style={{ paddingInlineStart: indent }}
        >
            <div
                className={`${styles.expandIconWrapper} ${props.isOpen ? styles.isOpen : ""
                    }`}
            >
                {props.node.droppable && (
                    <div onClick={handleToggle}>
                        <ArrowRightIcon color="secondary" />
                    </div>
                )}
            </div>
            <div>
                <ListAltIcon color="secondary" droppable={droppable} fileType={data?.fileType} />
            </div>
            <div className={styles.labelGridItem}>
                <TextField
                    color="primary"
                    InputProps={{
                        sx: {
                            "& input": {
                                fontSize: "1.5em",
                                display: 'flex',
                                alignItems: 'center',
                                color: 'darkBlue',
                                fontWeight: 'bold',
                            }
                        },
                    }}
                    id="filled-basic" defaultValue={props.node.text} variant="filled" size="small"
                    onBlur={e => props.saveCategoryName(props.node, e.target.value)}
                    onKeyUp={(e) => {
                        if (e.key === 'Escape') {
                            e.target.value = e.target.defaultValue;
                            console.log('Enter key pressed');
                        }
                    }}
                />
            </div>
        </div>
    );
};