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

export function RFQFeedback() {
    const {closeRFQ, shouldShow, status} = useShopStore(state => ({
        closeRFQ: state.closeRFQFeedback,
        shouldShow: state.shouldShowRFQFeedback,
        status: state.processingResult
    }))

    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>
    )
}