import React, { useEffect, useState } from 'react';
import { Icon } from '@foundations/Icons/Icons';
import Button from '@atoms/Button/Button';
import './TreeView.scss';

interface TreeViewItemProps {
    id: string;
    title: JSX.Element | string;
    onClick?: (id: string) => void;
    toggleOnClick?: boolean;
    isOpenDefault?: boolean;
    children?: Array<TreeViewItemProps>;
    className?: string;
    buttonVariant?: string;
    buttonClassName?: string;
    iconNames?: [string, string];
}

interface TreeViewProps {
    className?: string;
    buttonVariant?: 'default' | 'right' | 'far-right';
    data: Array<TreeViewItemProps>;
}

const TreeViewItem = (
    {
        id,
        title,
        isOpenDefault,
        onClick,
        toggleOnClick = false,
        children,
        className,
        buttonVariant,
        buttonClassName,
        iconNames = ['caret-right', 'caret-down']
    }: TreeViewItemProps
) => {

    const [isOpen, setIsOpen] = useState(isOpenDefault || false);

    const handleToggle = () => {
        if (toggleOnClick) {
            setIsOpen(!isOpen);
        }
    }

    useEffect(() => {
        setIsOpen(isOpenDefault || false);
    }, [isOpenDefault]);

    return (
        <li className={className} onClick={() => onClick?.(id)}>
            <div className={`d-flex align-items-center ${buttonVariant == 'far-right' ? 'justify-content-between' : 'justify-content-start'}`}
                onClick={handleToggle}>
                {children && <Button variant="link" className={`p-0 ${buttonVariant == 'right' || buttonVariant == 'far-right' ? 'ps-1 order-2' : 'pe-2'} ${buttonClassName}`} onClick={() => {
                    setIsOpen(!isOpen);
                }}><Icon name={isOpen ? iconNames[1] : iconNames[0]} className="mr-2" /></Button>}
                {title}
            </div>
            {children && children.length > 0 && (
                <ul className={isOpen ? "active" : "nested"}>
                    {children.map(child => (
                        <TreeViewItem key={child.id} {...child} />
                    ))}
                </ul>
            )}
        </li>
    );
};

const TreeView = (
    {
        data,
        buttonVariant = 'default',
        ...props
    }: TreeViewProps) => {
    props.className = `treeview ${props.className}`;
    return (
        <ul {...props}>
            {data.map(item => (
                <TreeViewItem key={item.id} {...item} buttonVariant={buttonVariant} />
            ))}
        </ul>
    );
};

export { TreeView, TreeViewProps, TreeViewItemProps };