import React, {useContext, useState} from "react";
import {Icon, List, Menu} from "semantic-ui-react";
import UserContext from "../Contexts/UserContext";

interface RulesetListProps {
    rulesetNames: string[];
    onItemChange: (newItemId: string | "addNewRuleset") => any;
    selectedItemIndex: number;
    creatingRuleset: boolean;
}

const RulesetList: React.FunctionComponent<RulesetListProps> = (props) => {
    const {rulesetNames, onItemChange, selectedItemIndex, creatingRuleset} = props;
    const {strings: Locale} = useContext(UserContext);

    const selectedItem = creatingRuleset ? "" : rulesetNames[selectedItemIndex];

    return (
        <Menu pointing={true} vertical={true}>
            {rulesetNames.map(name => (
                <Menu.Item
                    key={name}
                    name={name}
                    active={selectedItem === name}
                    onClick={() => onItemChange(name)}
                />
            ))}
            <Menu.Item
                active={creatingRuleset}
                onClick={() => onItemChange("addNewRuleset")}
            >
                {Locale.rulesetsPage.newRuleset}
                <Icon name={"add"} />
            </Menu.Item>
        </Menu>
    );
};

export default RulesetList;