import Button, { ButtonStyleType } from "../Button/Button";
import Icon from "../Icon/Icon";
import IconProp from "../../../Types/Icon/IconProp";
import React from "react";
export var SideOverSize;
(function (SideOverSize) {
    SideOverSize["Small"] = "Small";
    SideOverSize["Medium"] = "Medium";
    SideOverSize["Large"] = "Large";
})(SideOverSize || (SideOverSize = {}));
const SideOver = (props) => {
    let widthClass = "max-w-2xl";
    if (props.size === SideOverSize.Small) {
        widthClass = "max-w-2xl";
    }
    else if (props.size === SideOverSize.Medium) {
        widthClass = "max-w-5xl";
    }
    else if (props.size === SideOverSize.Large) {
        widthClass = "max-w-7xl";
    }
    return (React.createElement("div", { className: "relative z-10", "aria-labelledby": "slide-over-title", role: "dialog", "aria-modal": "true" },
        React.createElement("div", { className: "inset-0" }),
        React.createElement("div", { className: "inset-0 overflow-hidden" },
            React.createElement("div", { className: "inset-0 overflow-hidden" },
                React.createElement("div", { className: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full" },
                    React.createElement("div", { className: `pointer-events-auto w-screen ${widthClass}` },
                        React.createElement("div", { className: "flex h-full flex-col bg-white shadow-xl" },
                            React.createElement("div", { className: "flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6" },
                                React.createElement("div", { className: "flex items-start justify-between space-x-3" },
                                    React.createElement("div", { className: "space-y-1" },
                                        React.createElement("h2", { className: "text-lg font-medium text-gray-900", id: "slide-over-title" }, props.title),
                                        React.createElement("p", { className: "text-sm text-gray-500" }, props.description)),
                                    React.createElement("div", { className: "flex h-7 items-center" },
                                        React.createElement("button", { onClick: () => {
                                                props.onClose();
                                            }, type: "button", className: "text-gray-400 hover:text-gray-500" },
                                            React.createElement("span", { className: "sr-only" }, "Close panel"),
                                            React.createElement(Icon, { className: "h-6 w-6", icon: IconProp.Close }))))),
                            React.createElement("div", { className: "h-full overflow-y-scroll" },
                                React.createElement("div", { className: "space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5" }, props.children)),
                            React.createElement("div", { className: "flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6 flex justify-between" },
                                React.createElement("div", { className: "flex justify-start space-x-3" }, props.leftFooterElement),
                                React.createElement("div", { className: "flex justify-end space-x-3" },
                                    React.createElement(Button, { title: "Close", onClick: () => {
                                            props.onClose();
                                        }, buttonStyle: ButtonStyleType.NORMAL }),
                                    props.onSubmit && (React.createElement(Button, { title: props.submitButtonText || "Save", disabled: props.submitButtonDisabled, onClick: () => {
                                            props.onSubmit();
                                        }, buttonStyle: ButtonStyleType.PRIMARY })))))))))));
};
export default SideOver;
//# sourceMappingURL=SideOver.js.map