export function createProps<
    P extends Record<string, any>,
    K extends keyof P,
    A extends Exclude<P, K>
>(opts: { props: P; defaults?: Partial<P>; propKeys?: K[] }) {
    const { props, defaults = {} as DefaultProps<P>, propKeys = [] } = opts;
    const [_props, _setProps] = createSignal<P>({} as P);
    const [_attrs, _setAttrs] = createSignal<A>({} as A);
    createEffect(() => {
        const defaultStyle: any = (defaults as any)["style"]
            ? (defaults as any)["style"]
            : {};
        const defaultClass: any = (defaults as any)["class"]
            ? (defaults as any)["class"]
            : "";

        const incomingStyle: any = props["style"] ? props["style"] : {};
        const incomingClass: any = props["class"] ? props["class"] : "";

        const classAttr = classes(defaultClass, incomingClass);
        const styleAttr = Object.assign({}, defaultStyle, incomingStyle);

        const p = mergeProps(defaults, props, {
            class: classAttr,
            style: styleAttr
        });
        const s = splitProps(p, propKeys);

        _setProps(s[0] as any);
        _setAttrs(s[1] as any);
    });
    return { props: _props, attrs: _attrs };
}

export function createProps<
    P extends Record<string, any>,
    K extends keyof P,
    A extends Exclude<P, K>
>(opts: { props: P; defaults?: Partial<P>; propKeys?: K[] }) {
    const { props, defaults = {} as DefaultProps<P>, propKeys = [] } = opts;
    const [_props, _setProps] = createSignal<P>({} as P);
    const [_attrs, _setAttrs] = createSignal<A>({} as A);
    createEffect(() => {
        const defaultStyle: any = (defaults as any)["style"]
            ? (defaults as any)["style"]
            : {};
        const defaultClass: any = (defaults as any)["class"]
            ? (defaults as any)["class"]
            : "";

        const incomingStyle: any = props["style"] ? props["style"] : {};
        const incomingClass: any = props["class"] ? props["class"] : "";

        const classAttr = classes(defaultClass, incomingClass);
        const styleAttr = Object.assign({}, defaultStyle, incomingStyle);

        const p = mergeProps(defaults, props, {
            class: classAttr,
            style: styleAttr
        });
        const s = splitProps(p, propKeys);

        _setProps(s[0] as any);
        _setAttrs(s[1] as any);
    });
    return { props: _props, attrs: _attrs };
}

createEffect(() => {
  console.log("index", index)
})

createEffect(() => {
  console.log("index", index)
})

const CreatePoolViewButton: Component<{ index: number }> = ({ index }) => {
    return (
        <button
            class="flex items-center justify-center"
            onClick={() => {
                console.log("click", index)
                // if the pool at the index is not defined, add a new pool
                if (pools[index] === undefined) addPool()
                else removePool(index)
            }}
        >
            <svg
                class="w-4 h-4 text-light stroke-light"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <circle cx="12" cy="12" r="11"></circle>
                <line
                    style={{
                        transition: "transform 0.3s",
                        "transform-origin": "center",
                        transform: `rotateZ(${pools[index] !== undefined ? "90" : "0"}deg)`,
                    }}
                    x1="12"
                    y1="8"
                    x2="12"
                    y2="16"
                ></line>
                <line x1="8" y1="12" x2="16" y2="12"></line>
            </svg>
        </button>
    )
}

const CreatePoolViewButton: Component<{ index: number }> = ({ index }) => {
    return (
        <button
            class="flex items-center justify-center"
            onClick={() => {
                console.log("click", index)
                // if the pool at the index is not defined, add a new pool
                if (pools[index] === undefined) addPool()
                else removePool(index)
            }}
        >
            <svg
                class="w-4 h-4 text-light stroke-light"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <circle cx="12" cy="12" r="11"></circle>
                <line
                    style={{
                        transition: "transform 0.3s",
                        "transform-origin": "center",
                        transform: `rotateZ(${pools[index] !== undefined ? "90" : "0"}deg)`,
                    }}
                    x1="12"
                    y1="8"
                    x2="12"
                    y2="16"
                ></line>
                <line x1="8" y1="12" x2="16" y2="12"></line>
            </svg>
        </button>
    )
}

const addPool = () => {
    // setPools([...pools, { dice: 1, results: [] }])
    setPools(
        produce(array => {
            array.push({ dice: 1, results: [] })
        })
    )
}

const addPool = () => {
    // setPools([...pools, { dice: 1, results: [] }])
    setPools(
        produce(array => {
            array.push({ dice: 1, results: [] })
        })
    )
}