web2019/static/js/shop_components.jsx

'use strict';

import React, {Component} from "react";
import jsonLogic from 'json-logic-js';
import {useState, useEffect} from 'react';
import {useClickAway} from "@uidotdev/usehooks";
import {OverlayTrigger, Tooltip} from "react-bootstrap";

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


function Tip({id, tip}) {
    return (
        <OverlayTrigger
            placement="auto"
            trigger={['click', 'hover', 'focus']}
            style={{display: 'inline'}}
            overlay={<Tooltip id={id}>{tip}</Tooltip>}
        >
            <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
        </OverlayTrigger>
    );
}

class Radio extends Component {
    constructor(props) {
        super(props);
        // Initialize the state object with the initial values from the props
        this.state = {
            variant: props.outvar in props.data ? props.data[props.outvar] : props.variants[props.fallback ? props.fallback : 0],
        };

        // Bind the event handler to this
        this.handleClick = this.handleClick.bind(this);
        this.props.target.construct(this.props.outvar, this.state.variant);
    }

    handleClick(variant) {
        // Update the state object with the new value for outvar
        this.setState({
            ...this.state,
            variant: variant
        });
        this.props.target.update(this.props.outvar, variant);
    }

    render() {
        let key = this.props.id + this.props.outvar;
        return (
            <div className="shop-radio" key={this.props.id}>
                <div style={{"display": "inline"}}>
                    {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                    {this.props.title}
                </div>
                {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                {this.props.variants.map((variant, _) => (
                    <div className="form-check" key={key + variant}>
                        <input
                            className="form-check-input"
                            type="radio"
                            name={key}
                            id={key + variant}
                            checked={this.state.variant === variant}
                            onClick={() => this.handleClick(variant)}
                            onChange={() => this.handleClick(variant)}
                        />
                        <label className="form-check-label" htmlFor={key + variant}>
                            {variant}
                        </label>
                    </div>
                ))}
            </div>
        );
    }
}

function RadioWrapper(target, id, data, {title, variants, outvar, fallback, icon, tip}) {
    return <Radio target={target} title={title} variants={variants} outvar={outvar} icon={icon} tip={tip} key={id}
                  fallback={fallback}
                  id={id} data={data}/>;
}

class Switch extends Component {
    constructor(props) {
        super(props);
        // Initialize the state object with the initial values from the props
        this.state = {
            checked: props.outvar in props.data ? !!(props.data[props.outvar]) : !!(props.fallback)
        };

        // Bind the event handler to this
        this.handleClick = this.handleClick.bind(this);
        this.props.target.construct(this.props.outvar, this.state.checked);
    }

    handleClick() {
        // Update the state object with the new value for outvar
        let new_checked = !this.state.checked;
        this.setState({
            checked: new_checked
        });
        this.props.target.update(this.props.outvar, new_checked);
    }

    render() {
        let key = this.props.id + this.props.outvar;
        return (
            <div className="shop-switch" key={this.props.id}>
                <div className="form-check form-switch" key={key}>
                    <input
                        className="form-check-input"
                        type="checkbox"
                        role="switch"
                        id={key}
                        checked={this.state.checked}
                        onClick={this.handleClick}
                        onChange={this.handleClick}
                    />
                    <label className="form-check-label" htmlFor={key} style={{"display": "inline"}}>
                        {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                        {this.props.title}
                    </label>
                    {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                </div>
            </div>
        );
    }
}

function SwitchWrapper(target, id, data, {title, fallback, outvar, icon, tip}) {
    return <Switch target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} tip={tip} key={id}
                   id={id} data={data}/>;
}


class Line extends Component {
    constructor(props) {
        super(props);
        // Initialize the state object with the initial values from the props
        this.state = {
            text: props.outvar in props.data ? props.data[props.outvar] : (props.fallback ? props.fallback : "")
        };
        // Bind the event handler to this
        this.handleClick = this.handleClick.bind(this);
        this.props.target.construct(this.props.outvar, this.state.text);
    }

    handleClick(element) {
        let text = element.target.value;
        this.setState({
            text: text
        });
        this.props.target.update(this.props.outvar, text);
    }

    render() {
        let key = this.props.id + this.props.outvar;
        return (
            <div className="shop-line" key={this.props.id}>
                <label htmlFor={key} className="form-label">
                    {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                    {this.props.title}:
                </label>
                {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                <input type="text" className="form-control form-control-sm" id={key} onChange={this.handleClick}
                       value={this.state.text}/>
            </div>
        );
    }
}

function LineWrapper(target, id, data, {title, fallback, outvar, icon, tip}) {
    return <Line target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} tip={tip} key={id}
                 id={id} data={data}/>;
}

class SwitchLine extends Component {
    constructor(props) {
        super(props);
        // Initialize the state object with the initial values from the props
        this.state = {
            text: props.outvar in props.data ? props.data[props.outvar].text : (props.fallback ? props.fallback.text : ""),
            checked: props.outvar in props.data ? props.data[props.outvar].checked : (props.fallback ? props.fallback.checked : false)
        };
        // Bind the event handler to this
        this.handleText = this.handleText.bind(this);
        this.handleCheck = this.handleCheck.bind(this);
        this.props.target.construct(this.props.outvar, this.state);
    }

    handleText(element) {
        let new_state = {
            ...this.state,
            text: element.target.value
        }
        this.setState(new_state);
        this.props.target.update(this.props.outvar, new_state);
    }

    handleCheck() {
        // Update the state object with the new value for outvar
        let new_state = {
            ...this.state,
            checked: !this.state.checked
        }
        this.setState(new_state);
        this.props.target.update(this.props.outvar, new_state);
    }

    render() {
        let key = this.props.id + this.props.outvar;
        return (
            <div className="shop-switch-line" key={this.props.id}>
                <div className="form-check form-switch" key={key}>
                    <input
                        className="form-check-input"
                        type="checkbox"
                        role="switch"
                        id={key + "switch"}
                        checked={this.state.checked}
                        onClick={this.handleCheck}
                        onChange={this.handleCheck}
                    />
                    <label className="form-check-label" htmlFor={key + "switch"}>
                        {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                        {this.props.title}
                    </label>
                    {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                </div>
                <input type="text" className="form-control form-control-sm" id={key + "line"} onChange={this.handleText}
                       value={this.state.text} disabled={!this.state.checked}/>
            </div>
        );
    }
}

function SwitchLineWrapper(target, id, data, {title, fallback, outvar, icon, tip}) {
    return <SwitchLine target={target} title={title} fallback={fallback} outvar={outvar} icon={icon} tip={tip} key={id}
                       id={id} data={data}/>;
}


function UnimplementedComponent(type, id) {
    //console.error("Missing component with type:", type)
    return <div key={type + id} style={{background: "red"}}>UNIMPLEMENTED</div>
}

const componentsList = {
    "Radio": RadioWrapper,
    "Switch": SwitchWrapper,
    "Line": LineWrapper,
    "SwitchLine": SwitchLineWrapper,
    "Default": UnimplementedComponent,
};


export function ProcessOptions({options, data, target, id}) {
    let options_t = true_type_of(options);

    if (options_t === "array") {
        return Array.from(
            options.map((option_item, i) => ProcessOptions({
                options: option_item,
                data: data,
                target: target,
                id: id + i
            }))
        );
    } else if (options_t === "object") {
        if (
            true_type_of(options.type) === "string" &&
            (true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
        ) {
            if (options.type in componentsList) {
                return componentsList[options.type](target, id + options.type, data, options.args);
            } else if (options.type === "Group") {
                return (
                    <div className="border rounded" key={id + "group"}>
                        {ProcessOptions({
                            options: jsonLogic.apply(options.items, data),
                            data: data,
                            target: target,
                            id: id
                        })}
                    </div>);
            } else {
                return componentsList["Default"](options.type, id + "missing");
            }
        } else {
            return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id});
        }
    }
}

export function FilterOptions(options, data) {
    let options_t = true_type_of(options);
    let target = {};

    if (options_t === "array") {
        options.map((option_item, _) => {
            Object.assign(target, FilterOptions(option_item, data))
        });
    } else if (options_t === "object") {
        if (
            true_type_of(options.type) === "string" &&
            (true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
        ) {
            if (options.type in componentsList) {
                target[options.args.outvar] = data[options.args.outvar];
            } else if (options.type === "Group") {
                Object.assign(target, FilterOptions(jsonLogic.apply(options.items, data), data))
            }
        } else {
            Object.assign(target, FilterOptions(jsonLogic.apply(options, data), data))
        }
    }
    return target
}

export function OptionsDialogPopup({options, data, target, id, big, first, last, options_class}) {
    const [show, setShow] = useState(false);
    const ref = useClickAway((e) => {
            if (e.type === "mousedown") // ignore touchstart
                setShow(false)
        }
    );

    let div_classes = `overlayVariant border rounded ${big ? "overlay-bigcard" : "overlay-smallcard"} ${(!big && first) ? "overlay-first" : ""} ${(!big && last) ? "overlay-last" : ""} ${options_class || ""}`;
    const handleClick = (event) => {
        setShow(!show);
    };

    return (
        <div ref={ref}>
            <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
                 onClick={handleClick}/>
            <div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
                <ProcessOptions
                    options={options}
                    data={data}
                    key={"processed_options_" + id}
                    id={"processed_options_" + id}
                    target={target}
                />
            </div>
        </div>
    );
}

export function OptionsSummaryPopup({id, options, data}) {
    const [show, setShow] = useState(false);
    const [position, setPosition] = useState({x: 0, y: 0});
    const [size, setSize] = useState({w: 0, h: 0});
    let display_options = FilterOptions(options, data);
    const close = () => {
        setShow(false);
        document.removeEventListener("scroll", handleScroll, true);
    }

    const ref = useClickAway(close);

    const reposition = () => {
        let popup_button = document.getElementById(id + "img");
        if (!popup_button) {
            document.removeEventListener("scroll", handleScroll, true);
            return;
        }
        let rect = popup_button.getBoundingClientRect()
        let pos_x = (rect.left + rect.right) / 2;
        let pos_y = (rect.top + rect.bottom) / 2;
        if (pos_x + size.w > window.innerWidth) {
            setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2});
        } else {
            setPosition({x: pos_x - size.w / 2, y: pos_y - size.h - 20});
        }
    }

    const handleScroll = (e) => {
        if (e.target !== document.getElementById(id)) {
            close();
        }
    }

    useEffect(() => {
        if (show) {
            let popup = document.getElementById(id);
            let width = popup.offsetWidth;
            let height = popup.offsetHeight;
            setSize({w: width, h: height});
            reposition()
        }
    }, [show])


    useEffect(() => {
        if (show) {
            reposition();
        }
    }, [show, size])

    const handleClick = (event) => {
        setShow(!show);
        if (!show) {
            document.addEventListener("scroll", handleScroll, true);
        }
    };

    const stringify = (value) => {
        let value_type = true_type_of(value);
        if (value_type === "string") {
            return value;
        } else if (value_type === "object") {
            if (value.checked === false) {
                return "off";
            } else if (value.checked === true && value.text) {
                return value.text;
            }
        }
        return JSON.stringify(value);
    }

    return (
        <div ref={ref}>
            <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
                 id={id + "img"}
                 onClick={handleClick}/>
            <div style={{'display': show ? 'flex' : 'none', 'top': position.y, 'left': position.x}}
                 className="overlayVariant card border rounded"
                 id={id}>
                <div className="card-body">
                    {Array.from(Object.entries(display_options)
                        .filter(([key, value], _) => key !== "ext_data")
                        .map(([key, value], _) => {
                            return (<p className="card-text" key={id + key}><i>{key}</i>: {stringify(value)}</p>);
                        }))}
                </div>
            </div>
        </div>
    );
}

export function FillExtData(data, index) {
    return {
        has_other_dio: data.filter((value, item_index) => index !== item_index && value.name &&value.name.endsWith("-TTL")).length > 0,
        has_dds: data.filter(((value, _) => value.name === "DDS" && value.name_number === "4410" && (!value.options_data || !value.options_data.mono_eem))).length > 0,
        has_sampler: data.filter(((value, _) => value.name === "Sampler" && (!value.options_data || !value.options_data.mono_eem))).length > 0,
    }
}