import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";
import {Modal} from "react-bootstrap";
import {Validation} from "./validate";
import React from "react";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";

export function RFQFeedback() {
    // #!render_count
    const renderCount = useRenderCount();

    const closeRFQ = useShopStore((state) => state.closeRFQFeedback);
    const shouldShow = useShopStore((state) => state.shouldShowRFQFeedback);
    const status = useShopStore((state) => state.processingResult);

    // #!render_count
    console.log("RFQFeedback renders: ", renderCount)

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

    return (
        <Modal show={shouldShow} animation={true} centered>
            <Modal.Body ref={ref} className="rfqFeedback">
                <div className="d-flex">
                    <div>
                        {status.status === Validation.OK ?
                            <img width="30px" src="/images/shop/icon-done.svg" alt="close"/>
                            : <img width="30px" src="/images/shop/icon-warning.svg" alt="close"/>
                        }
                    </div>
                    <div style={{'padding': '0 .5em'}}>
                        {status.message}
                    </div>
                </div>
            </Modal.Body>
        </Modal>
    )
}