import React from "react";
import { ArrayIcon, CopyIcon, DeleteIcon, DublicateIcon, FlipXAxisIcon, FlipZAxisIcon, FocusIcon, GroupIcon, ModifiersIcon, MoveIcon, PasteIcon, RenameIcon, RotateIcon, SubMenuIcon, TransformIcon } from "../../icons/ContextMenuIcons";

type ContextMenuProps = {
    visibility: {
        rename: boolean;
        focus: boolean;
        flipX: boolean;
        flipZ: boolean;
        move: boolean;
        rotate: boolean;
        duplicate: boolean;
        copy: boolean;
        paste: boolean;
        modifier: boolean;
        group: boolean;
        array: boolean;
        delete: boolean;
    };
    onRename: () => void;
    onFocus: () => void;
    onFlipX: () => void;
    onFlipZ: () => void;
    onMove: () => void;
    onRotate: () => void;
    onDuplicate: () => void;
    onCopy: () => void;
    onPaste: () => void;
    onGroup: () => void;
    onArray: () => void;
    onDelete: () => void;
};

const ContextMenu: React.FC<ContextMenuProps> = ({
    visibility,
    onRename,
    onFocus,
    onFlipX,
    onFlipZ,
    onMove,
    onRotate,
    onDuplicate,
    onCopy,
    onPaste,
    onGroup,
    onArray,
    onDelete,
}) => {



    return (
        <div className="context-menu">
            {visibility.rename && (
                <div className="menuItem">
                    <button className="button" onClick={onRename}>
                        <div className="icon"><RenameIcon /></div>
                        <span>Rename</span>
                    </button>
                    <span className="shortcut">F2</span>
                </div>
            )}
            {visibility.focus && (
                <div className="menuItem">
                    <button className="button" onClick={onFocus}>
                        <div className="icon"><FocusIcon /></div>
                        <span>Focus</span>
                    </button>
                    <span className="shortcut">F</span>
                </div>
            )}
            {visibility.flipX && (
                <div className="menuItem">
                    <button className="button" onClick={onFlipX}>
                        <div className="icon"><FlipXAxisIcon /></div>
                        <span>Flip to X axis</span>
                    </button>
                </div>
            )}
            {visibility.flipZ && (
                <div className="menuItem">
                    <button className="button" onClick={onFlipZ}>
                        <div className="icon"><FlipZAxisIcon /></div>
                        <span>Flip to Z axis</span>
                    </button>
                </div>
            )}
            {(visibility.move || visibility.rotate) && (
                <div className="menuItem">
                    <button className="button">
                        <div className="icon"><TransformIcon /></div>
                        <span>Transform</span>
                    </button>
                    <div className="more"><SubMenuIcon /></div>
                    <div className="submenu">
                        {visibility.move && (
                            <div className="menuItem">
                                <button className="button" onClick={onMove}>
                                    <div className="icon"><MoveIcon /></div>
                                    <span>Move</span>
                                </button>
                                <span className="shortcut">G</span>
                            </div>
                        )}
                        {visibility.rotate && (
                            <div className="menuItem">
                                <button className="button" onClick={onRotate}>
                                    <div className="icon"><RotateIcon /></div>
                                    <span>Rotate</span>
                                </button>
                                <span className="shortcut">R</span>
                            </div>
                        )}
                    </div>
                </div>
            )}
            {visibility.duplicate && (
                <div className="menuItem">
                    <button className="button" onClick={onDuplicate}>
                        <div className="icon"><DublicateIcon /></div>
                        <span>Duplicate</span>
                    </button>
                    <span className="shortcut">Ctrl + D</span>
                </div>
            )}
            {visibility.copy && (
                <div className="menuItem">
                    <button className="button" onClick={onCopy}>
                        <div className="icon"><CopyIcon /></div>
                        <span>Copy Objects</span>
                    </button>
                    <span className="shortcut">Ctrl + C</span>
                </div>
            )}
            {visibility.paste && (
                <div className="menuItem">
                    <button className="button" onClick={onPaste}>
                        <div className="icon"><PasteIcon /></div>
                        <span>Paste Objects</span>
                    </button>
                    <span className="shortcut">Ctrl + V</span>
                </div>
            )}
            {visibility.modifier && (
                <div className="menuItem">
                    <div className="icon"><ModifiersIcon /></div>
                    <button className="button">Modifiers</button>
                </div>
            )}
            {(visibility.group || visibility.array) && (
                <div className="menuItem">
                    <button className="button">Group / Array</button>
                    <div className="submenu">
                        {visibility.group && (
                            <div className="menuItem">
                                <button className="button" onClick={onGroup}>
                                    <GroupIcon />
                                    <span>Group</span>
                                </button>
                                <span className="shortcut">Ctrl + G</span>
                            </div>
                        )}
                        {visibility.array && (
                            <div className="menuItem">
                                <button className="button" onClick={onArray}>
                                    <div className="icon"><ArrayIcon /></div>
                                    <span>Array</span>
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            )}
            {visibility.delete && (
                <div className="menuItem">
                    <button className="button" onClick={onDelete}>
                        <div className="icon"><DeleteIcon /></div>
                        <span>Delete</span>
                    </button>
                    <span className="shortcut">X</span>
                </div>
            )}
        </div>
    );
};

export default ContextMenu;
