'use strict';

import React, {useState} from "react";
import jsonLogic from 'json-logic-js';
import { v4 as uuidv4 } from 'uuid';

// https://stackoverflow.com/a/70511311
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

function Radio(target, {title, variants, outvar}) {
    console.log(target)
    function handleClick(variant) {
        console.log(variant)
        target[outvar] = variant;
        //this.setState()
    }

    return (
        <div className="shop-radio" key={uuidv4()}>
            {title}
            {variants.map((variant, _) => (
                <div className="form-check" key={outvar + variant}>
                    <input
                        className="form-check-input"
                        type="radio"
                        name={outvar}
                        id={outvar + variant}
                        checked={target[outvar] === variant}
                        onClick={() => handleClick(variant)}
                        onChange={() => handleClick(variant)}
                    />
                    <label className="form-check-label" htmlFor={outvar + variant}>
                        {variant}
                    </label>
                </div>
            ))}
        </div>
    );
}

function MissingComponent(...args) {
    console.error("Missing component with args:", args)
    return <label style={{background: "red"}}>MISSING</label>
}

const componentsList = {
    "Radio": Radio,
    "Default": MissingComponent,
};


export default function ProcessOptions({options, data, target}) {
    let options_t = trueTypeOf(options);

    if (options_t === "array") {
        return Array.from(
            options.map((option_item, _) => ProcessOptions({options: option_item, data: data, target: target}))
        );
    } else if (options_t === "object") {
        if (
            trueTypeOf(options.type) === "string" &&
            trueTypeOf(options.args) === "object"
        ) {
            if (options.type in componentsList) {
                return componentsList[options.type](target, options.args);
            }else {
                return componentsList["Default"](target, options.args);
            }
        } else {
            return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target});
        }
    }
}