import PermissionUtil from "../../Utils/Permission";
import User from "../../Utils/User";
import Navigation from "../../Utils/Navigation";
import { ButtonStyleType } from "../Button/Button";
import Card from "../Card/Card";
import { FormType } from "../Forms/ModelForm";
import ModelFormModal from "../ModelFormModal/ModelFormModal";
import ModelDetail from "./ModelDetail";
import IconProp from "../../../Types/Icon/IconProp";
import { PermissionHelper, } from "../../../Types/Permission";
import React, { useEffect, useRef, useState } from "react";
const CardModelDetail = (props) => {
    var _a;
    const [cardButtons, setCardButtons] = useState([]);
    const [showModel, setShowModal] = useState(false);
    const [item, setItem] = useState(null);
    const [refresher, setRefresher] = useState(false);
    const model = new props.modelDetailProps.modelType();
    const onBeforeEditRef = useRef(props.onBeforeEdit);
    useEffect(() => {
        onBeforeEditRef.current = props.onBeforeEdit;
    }, [props.onBeforeEdit]);
    useEffect(() => {
        setRefresher(!refresher);
    }, [props.refresher]);
    useEffect(() => {
        const userProjectPermissions = PermissionUtil.getProjectPermissions();
        const hasPermissionToEdit = Boolean(userProjectPermissions &&
            userProjectPermissions.permissions &&
            PermissionHelper.doesPermissionsIntersect(model.updateRecordPermissions, userProjectPermissions.permissions.map((item) => {
                return item.permission;
            }))) || User.isMasterAdmin();
        let cardButtons = [];
        // Add documentation link button first if provided
        if (props.documentationLink) {
            cardButtons.push({
                title: "View Documentation",
                icon: IconProp.Book,
                buttonStyle: ButtonStyleType.OUTLINE,
                className: "hidden md:flex",
                onClick: () => {
                    Navigation.navigate(props.documentationLink, {
                        openInNewTab: true,
                    });
                },
            });
        }
        // Add video link button if provided
        if (props.videoLink) {
            cardButtons.push({
                title: "Watch Demo",
                icon: IconProp.Play,
                buttonStyle: ButtonStyleType.OUTLINE,
                className: "hidden md:flex",
                onClick: () => {
                    Navigation.navigate(props.videoLink, {
                        openInNewTab: true,
                    });
                },
            });
        }
        if (props.isEditable && hasPermissionToEdit) {
            cardButtons.push({
                title: props.editButtonText || `Edit ${model.singularName}`,
                buttonStyle: ButtonStyleType.NORMAL,
                onClick: () => {
                    if (onBeforeEditRef.current && onBeforeEditRef.current() === false) {
                        return;
                    }
                    setShowModal(true);
                },
                icon: IconProp.Edit,
            });
        }
        if (props.cardProps.buttons) {
            cardButtons = cardButtons.concat(...props.cardProps.buttons);
        }
        setCardButtons(cardButtons);
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(Card, Object.assign({}, props.cardProps, { buttons: cardButtons }),
            React.createElement("div", { className: "border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2" },
                React.createElement(ModelDetail, Object.assign({ refresher: refresher }, props.modelDetailProps, { modelAPI: props.modelAPI, onItemLoaded: (item) => {
                        setItem(item);
                        if (props.modelDetailProps.onItemLoaded) {
                            props.modelDetailProps.onItemLoaded(item);
                        }
                    } })))),
        showModel ? (React.createElement(ModelFormModal, { title: `Edit ${model.singularName}`, modalWidth: props.createEditModalWidth, modelAPI: props.modelAPI, onClose: () => {
                setShowModal(false);
            }, submitButtonText: `Save Changes`, onSuccess: (item) => {
                setShowModal(false);
                setRefresher(!refresher);
                if (props.onSaveSuccess) {
                    props.onSaveSuccess(item);
                }
            }, name: props.name, modelType: props.modelDetailProps.modelType, formProps: {
                id: `edit-${(_a = model.singularName) === null || _a === void 0 ? void 0 : _a.toLowerCase()}-from`,
                fields: props.formFields || [],
                name: props.name,
                formType: FormType.Update,
                modelType: props.modelDetailProps.modelType,
                steps: props.formSteps || [],
                createOrUpdateApiUrl: props.createOrUpdateApiUrl,
            }, modelIdToEdit: (item === null || item === void 0 ? void 0 : item.id) || undefined })) : (React.createElement(React.Fragment, null))));
};
export default CardModelDetail;
//# sourceMappingURL=CardModelDetail.js.map