import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, Modal } from "@powerhousedao/design-system";
import { twMerge } from "tailwind-merge";
import { Divider } from "../divider/divider.js";
import { DriveSettingsForm, } from "../form/drive-settings-form.js";
export function DriveSettingsModal(props) {
    const { drive, open, sharingType, availableOffline, onOpenChange, onDeleteDrive, onRenameDrive, onChangeSharingType, onChangeAvailableOffline, modalProps, containerProps, } = props;
    const onSubmit = (data) => {
        if (data.name !== drive.header.name) {
            onRenameDrive(drive, data.name);
        }
        if (data.sharingType !== sharingType) {
            onChangeSharingType(drive, data.sharingType);
        }
        if (data.availableOffline !== availableOffline) {
            onChangeAvailableOffline(drive, data.availableOffline);
        }
        onOpenChange(false);
    };
    function handleDeleteDrive() {
        onDeleteDrive(drive);
        onOpenChange(false);
    }
    function handleCancel() {
        onOpenChange(false);
    }
    return (_jsx(Modal, { ...modalProps, contentProps: {
            className: "rounded-2xl",
        }, onOpenChange: onOpenChange, open: open, children: _jsxs("div", { ...containerProps, className: twMerge("max-w-[408px] rounded-2xl p-6", containerProps?.className), children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("h1", { className: "text-xl font-bold", children: "Drive settings" }), _jsx("button", { className: "flex size-8 items-center justify-center rounded-md bg-gray-100 text-gray-500 outline-none hover:text-gray-900", onClick: handleCancel, tabIndex: -1, children: _jsx(Icon, { name: "XmarkLight", size: 24 }) })] }), _jsx(Divider, { className: "my-4" }), _jsx(DriveSettingsForm, { handleCancel: handleCancel, handleDeleteDrive: handleDeleteDrive, onSubmit: onSubmit, drive: drive, sharingType: sharingType, availableOffline: availableOffline })] }) }));
}
//# sourceMappingURL=drive-settings-modal.js.map