import React__default, { useState, createContext, useContext } from 'react';
import { extractErrorMessage } from '../../utils/extractErrorMessage.mjs';
import { noop } from '../shared/utils/noop.mjs';
import { Button } from './Button.mjs';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { Modal } from './Modal.mjs';
import { useToast } from '../shared/components/Toast.mjs';
import { Typography } from './Typography.mjs';
import { useModalState } from '../shared/components/Modal.mjs';
import styled from '../../../../../node_modules/@mui/material/styles/styled.mjs';

const Container$2 = styled('div')(({ theme })=>({
        border: '1px solid',
        borderColor: theme.styleConfig.colors.subtle,
        borderRadius: theme.styleConfig.borderRadius,
        backgroundColor: theme.styleConfig.container.backgroundColor
    }));
const TitleContainer = styled('div')(({ theme })=>({
        [theme.breakpoints.down('sm')]: {
            flexDirection: 'column',
            alignItems: 'flex-start',
            gap: theme.spacing(1)
        },
        padding: theme.spacing(1.5, 2),
        borderBottom: '1px solid',
        borderBottomColor: theme.styleConfig.colors.subtle,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    }));
const ContentContainer = styled('div')(({ theme })=>({
        padding: theme.spacing(2)
    }));
const DEFAULT_STATE = {
    editing: false,
    setEditing: noop
};
const SettingsContext = /*#__PURE__*/ createContext(DEFAULT_STATE);
const useSettingsContainer = ()=>useContext(SettingsContext);
const SettingsContainer = ({ canEdit = true, disableSave, children, hasCTA, onCancel, onSave, title, customCTA, creating, editing: externalEditing, setEditing: externalSetEditing, modalDescription, useBlockNavigation })=>{
    const [internalEditing, internalSetEditing] = useState(creating ?? false);
    const [isSaving, setIsSaving] = useState(false);
    const { openToast, closeToast } = useToast();
    const shouldUseExternalEditing = externalEditing !== undefined && !!externalSetEditing;
    const editing = shouldUseExternalEditing ? externalEditing : internalEditing;
    const setEditing = shouldUseExternalEditing ? externalSetEditing : internalSetEditing;
    const { allowNavigation, blocked, cancelNavigation } = useBlockNavigation(editing && !isSaving);
    const edit = ()=>{
        setEditing(true);
    };
    const cancel = ()=>{
        onCancel?.();
        closeToast();
        setEditing(false);
    };
    const save = async ()=>{
        setIsSaving(true);
        try {
            await onSave?.();
            setEditing(false);
        } catch (e) {
            const message = extractErrorMessage(e);
            if (message) {
                openToast({
                    type: 'error',
                    text: message
                });
            }
        } finally{
            setIsSaving(false);
        }
    };
    const modalState = useModalState(save);
    if (!modalDescription) {
        modalDescription = 'Double check before saving your changes.';
    }
    return /*#__PURE__*/ React__default.createElement(SettingsContext.Provider, {
        value: {
            editing,
            setEditing
        }
    }, /*#__PURE__*/ React__default.createElement(Modal, {
        ...modalState,
        confirmButtonText: "Save changes",
        description: modalDescription,
        title: "Save changes?",
        warning: true
    }), /*#__PURE__*/ React__default.createElement(Modal, {
        isOpen: blocked,
        close: cancelNavigation,
        confirm: ()=>{
            allowNavigation();
            return Promise.resolve();
        },
        confirmButtonText: "Navigate without saving",
        cancelButtonText: "Keep editing",
        description: 'Your changes are unsaved – are you sure you want to navigate away?',
        title: "Save changes?",
        warning: true
    }), /*#__PURE__*/ React__default.createElement(Container$2, null, /*#__PURE__*/ React__default.createElement(TitleContainer, null, /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "h3"
    }, title), /*#__PURE__*/ React__default.createElement(FlexBox, {
        alignItems: "center",
        gap: 1
    }, hasCTA && /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, editing ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Button, {
        compact: true,
        onClick: cancel,
        variant: "ghost"
    }, "Cancel"), /*#__PURE__*/ React__default.createElement(Button, {
        compact: true,
        disabled: disableSave,
        onClick: modalState.open
    }, "Save")) : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, customCTA ? customCTA : canEdit && /*#__PURE__*/ React__default.createElement(Button, {
        compact: true,
        onClick: edit,
        variant: "ghost"
    }, "Edit"))))), /*#__PURE__*/ React__default.createElement(ContentContainer, null, children)));
};

export { SettingsContainer, useSettingsContainer };
//# sourceMappingURL=SettingsContainer.mjs.map
