import React from 'react';
import './Launchpad.css';
import Launcher, { LauncherProps } from '../Launcher/Launcher';
import classnames from 'classnames';

export interface Selectable {
    onSelected?: (key: string) => void;
}

export type Flow = "horizontal" | "vertical";

interface LaunchpadProps {
    exclusive: boolean;
    flow?: Flow;
    options: Array<LauncherProps>;
}

const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => {
    console.log("running exclusiveSelect on ", targetId);
    return { [targetId]: true };
}

const multiSelect = (state: { [key: string]: boolean }, targetId: string) => {
    if (state[targetId]) {
        return { ...state, [targetId]: false };
    } else {
        return { ...state, [targetId]: true };
    }
}

const Launchpad = ({ flow = "horizontal", options, exclusive }: LaunchpadProps) => {
    const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {});

    let classOptions = [ "launchpad" ];

    if (flow === "horizontal") {
        classOptions.push("launchpad_horizontal-flow");
    } else {
        classOptions.push("launchpad_vertical-flow");
    }

    let tiedOptions = options.map(option =>
        <Launcher key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
    );

    return (<div className={classnames(classOptions)}> {tiedOptions} </div>)
}

export default Launchpad;
