import { createSignal } from "solid-js";
import { createStore, reconcile } from "solid-js/store";
import { useSignal } from "./use-signal";

const [count, setCount] = createSignal(0);
const doubled = () => count() * 2;

export function Counter() {
    const ct = useSignal(count);
    const db = useSignal(doubled);
    const increment = () => setCount(c => c + 1);

    return (
        <div>
            <div>
                {ct} × 2 = {db}
            </div>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

const [counters, setCounters] = createStore([1, 2, 3, 4, 5]);

export function Counters() {
    const prev = useSignal(() => counters);
    const next = prev[prev.length - 1] ? prev[prev.length - 1] + 1 : 1;
    const inc = () => setCounters(reconcile([...prev, next]));
    const dec = () => setCounters(reconcile(prev.slice(0, -1)));

    return (
        <>
            <h1>Counters</h1>
            {prev ? prev.map(counter => <Counter key={counter} />) : <i>No Counters</i>}
            <button onClick={inc}>Add More Counters</button>
            <button onClick={dec}>Remove Counters</button>
        </>
    );
}