import React__default, { useMemo, useCallback } from 'react';
import { FlexBox } from '../shared/components/FlexBox.mjs';
import { Input } from '../components/Input.mjs';
import { SettingsContainer, useSettingsContainer } from '../components/SettingsContainer.mjs';
import { SettingsList } from '../components/SettingsList.mjs';
import { SettingsListItem } from '../components/SettingsListItem.mjs';
import { Typography } from '../components/Typography.mjs';
import { isEmptyObject } from '../utils/isEmptyObject.mjs';
import { useFormState } from '../utils/useFormState.mjs';
import { useMutateOrganization } from '../utils/useMutateOrganization.mjs';
import { useRbac } from '../utils/useRbac.mjs';
import { useStateSliceSetter } from '../utils/useStateSliceSetter.mjs';
import { useOrgSettingsRouterController } from './AdminPortalOrgRouter.mjs';

const useMutateOrgSettingsDetails = ()=>{
    const { mutate } = useMutateOrganization();
    const setOrgDetails = ({ organizationName, organizationSlug })=>{
        return mutate({
            ...organizationName && {
                organization_name: organizationName
            },
            ...organizationSlug && {
                organization_slug: organizationSlug
            }
        }, {
            errorMessage: 'Failed to update details.'
        });
    };
    return {
        setOrgDetails
    };
};
const OrgSettingsDetailsBody = ({ canSetName, canSetSlug, remoteState, localState, setLocalState })=>{
    const handleNameChange = useStateSliceSetter(setLocalState, 'organizationName');
    const handleSlugChange = useStateSliceSetter(setLocalState, 'organizationSlug');
    const { editing } = useSettingsContainer();
    return /*#__PURE__*/ React__default.createElement(FlexBox, {
        flexDirection: "column",
        gap: 2
    }, /*#__PURE__*/ React__default.createElement(SettingsList, null, /*#__PURE__*/ React__default.createElement(SettingsListItem, {
        title: "Name"
    }, editing && canSetName ? /*#__PURE__*/ React__default.createElement(Input, {
        placeholder: "Enter Name",
        value: localState.organizationName,
        onChange: handleNameChange
    }) : /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body2"
    }, remoteState.organizationName)), /*#__PURE__*/ React__default.createElement(SettingsListItem, {
        title: "Slug"
    }, editing && canSetSlug ? /*#__PURE__*/ React__default.createElement(Input, {
        placeholder: "Enter Slug",
        value: localState.organizationSlug,
        onChange: handleSlugChange
    }) : /*#__PURE__*/ React__default.createElement(Typography, {
        variant: "body2"
    }, remoteState.organizationSlug))));
};
const OrgSettingsDetailsSection = ({ orgInfo })=>{
    const { data: canSetName } = useRbac('stytch.organization', 'update.info.name');
    const { data: canSetSlug } = useRbac('stytch.organization', 'update.info.slug');
    const remoteState = useMemo(()=>({
            organizationName: orgInfo.organization_name,
            organizationSlug: orgInfo.organization_slug
        }), [
        orgInfo
    ]);
    const { localState, setLocalState, editing, handleSetEditing } = useFormState({
        remoteState
    });
    const { useBlockNavigation } = useOrgSettingsRouterController();
    const { setOrgDetails } = useMutateOrgSettingsDetails();
    const findMutatedProperties = useCallback(()=>{
        const mutatedProperties = {};
        if (remoteState.organizationName !== localState.organizationName && localState.organizationName.length > 0) {
            mutatedProperties.organizationName = localState.organizationName;
        }
        if (remoteState.organizationSlug !== localState.organizationSlug && localState.organizationSlug.length > 0) {
            mutatedProperties.organizationSlug = localState.organizationSlug;
        }
        return mutatedProperties;
    }, [
        localState.organizationName,
        localState.organizationSlug,
        remoteState.organizationName,
        remoteState.organizationSlug
    ]);
    const handleSave = useCallback(async ()=>{
        const mutatedProperties = findMutatedProperties();
        if (!isEmptyObject(mutatedProperties)) {
            await setOrgDetails({
                organizationName: mutatedProperties.organizationName,
                organizationSlug: mutatedProperties.organizationSlug
            });
        }
        return;
    }, [
        setOrgDetails,
        findMutatedProperties
    ]);
    const disableSave = isEmptyObject(findMutatedProperties());
    return /*#__PURE__*/ React__default.createElement(SettingsContainer, {
        title: "Details",
        hasCTA: canSetName || canSetSlug,
        onSave: handleSave,
        useBlockNavigation: useBlockNavigation,
        editing: editing,
        setEditing: handleSetEditing,
        disableSave: disableSave
    }, /*#__PURE__*/ React__default.createElement(OrgSettingsDetailsBody, {
        canSetName: canSetName,
        canSetSlug: canSetSlug,
        localState: localState,
        remoteState: remoteState,
        setLocalState: setLocalState
    }));
};

export { OrgSettingsDetailsBody, OrgSettingsDetailsSection, useMutateOrgSettingsDetails };
//# sourceMappingURL=OrgSettingsDetailsSection.mjs.map
