import React, {useState} from "react";
import {useClickAway} from "./useClickAway";
import {ProcessOptions} from "./Options";

export function DialogPopup({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>
    );
}