import React from "react";
import {Modal} from "react-bootstrap";
import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";

export function ShowJSON() {
    const {shouldShow, description, showDescription, closeDescription} = useShopStore(state => ({
        shouldShow: state.shouldShowDescription,
        description: state.description,
        closeDescription: state.closeDescription,
        showDescription: state.showDescription,
    }));

    const ref = useClickAway((e) => {
            if (e.type === "mousedown") // ignore touchstart
                closeDescription()
        }
    );

    return (<>
        <input
            className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
            style={{'cursor': 'pointer', 'fontWeight': '700'}}
            defaultValue="Show JSON"
            onClick={showDescription}
            readOnly={true}/>
        <Modal show={shouldShow} animation={true} centered>
            <Modal.Body ref={ref}>
                    <textarea
                        value={description}
                        className="form-control w-100"
                        rows={10}
                        readOnly={true}
                        placeholder="There should be description of the crate"/>

                <div className="d-flex flex-column flex-sm-row justify-content-end m-1">
                    <a type="button" onClick={closeDescription}
                       className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2">Close</a>
                </div>
            </Modal.Body>
        </Modal>
    </>)
}