import {createEffect} from "solid-js";

import Direction from "./input/Direction.jsx";
import Value from "./input/Value.jsx";

import styles from "./RightPane.module.css";
import input_styles from "./input/input.module.css";


export const DIRECTIONS = [
    "Up",
    "Right",
    "Down",
    "Left"
];

export default function Signal(props) {
    let {signal, setSignal} = props;

    return (<Show when={signal()} fallback={<i class={styles.gray}>No signal</i>}>
        <div class={styles.indent}>
            <h3 class={styles.h3}>Direction:</h3>
            <Show when={setSignal} fallback={signal()?.direction}>
                <Direction value={() => signal()?.direction} setValue={(dir) => {
                    setSignal((signal) => {
                        signal.direction = dir;
                        return signal;
                    });
                }} />
            </Show>
            <h3 class={styles.h3}>Stack:</h3>
            <ol class={styles.stack}>
                <For each={signal()?.stack} fallback={<i class={styles.empty}>(Empty)</i>}>
                    {(item, index) => {
                        let setValue = setSignal ? (new_value) => {
                            if (typeof new_value === "function") {
                                new_value = new_value(item);
                            }
                            setSignal((signal) => {
                                signal.stack[index()] = new_value;
                                return signal;
                            });
                        } : null;

                        return <li><Value value={() => item} setValue={setValue} /></li>;

                        // if (setSignal) {
                        //     if ("Number" in item) {
                        //         // Return number input for the `index()`-th element
                        //         return <li>
                        //             <input
                        //                 class={input_styles.input}
                        //                 type="number"
                        //                 value={item["Number"]}
                        //                 onChange={(evt) => {
                        //                     console.log("input");
                        //                     setSignal((signal) => {
                        //                         signal.stack[index()] = {"Number": +evt.currentTarget.value};
                        //                         return signal;
                        //                     });
                        //                 }}
                        //             />
                        //         </li>;
                        //     } else if ("String" in item) {
                        //         // Return string input for the `index()`-th element
                        //         return <li>"
                        //             <input
                        //                 class={input_styles.input}
                        //                 type="string"
                        //                 value={item["String"]}
                        //                 onChange={(evt) => {
                        //                     setSignal((signal) => {
                        //                         signal.stack[index()] = {"String": evt.currentTarget.value};
                        //                         return signal;
                        //                     });
                        //                 }}
                        //             />
                        //         "</li>;
                        //     }
                        // } else {
                        //     if (item?.["Number"]) {
                        //         return <li>{item["Number"]}</li>;
                        //     } else if (item?.["String"]) {
                        //         return <li>"{item["String"]}"</li>;
                        //     }
                        // }
                    }}
                </For>
                <Show when={setSignal}>
                    <div>
                        <button
                            class={input_styles.button}
                            aria-label="Remove a value from the stack"
                            title="Pop value"
                            disabled={!signal() || signal().stack.length == 0}
                            onClick={(evt) => {
                                setSignal((signal) => {
                                    signal.stack.pop();
                                    return signal;
                                });
                            }}
                        >-</button>
                        <button
                            class={input_styles.button}
                            aria-label="Add a value to the stack"
                            title="Push value"
                            onClick={(evt) => {
                                setSignal((signal) => {
                                    signal.stack.push({"Number": 0.0});
                                    return signal;
                                });
                            }}
                        >+</button>
                    </div>
                </Show>
            </ol>
        </div>
    </Show>);
}