/**
 * amis-ui v6.12.0-beta.0
 * Copyright 2018-2025 fex
 */

import { __read } from 'tslib';
import React__default from 'react';
import { themeable, localeable, resizeSensor } from 'amis-core';
import SmoothSignature from '../utils/smoothSignature.js';
import Button from './Button.js';
import './404.js';
import './Alert.js';
import './ContextMenu.js';
import './AsideNav.js';
import './Avatar.js';
import './Breadcrumb.js';
import './Checkbox.js';
import './Collapse.js';
import './CollapseGroup.js';
import './DatePicker.js';
import './DateRangePicker.js';
import './Drawer.js';
import './Tabs.js';
import './Editor.js';
import './DiffEditor.js';
import './Html.js';
import { Icon } from './icons.js';
import './Layout.js';
import FinalModal from './Modal.js';
import './Radios.js';
import './Range.js';
import './Rating.js';
import './Select.js';
import './SparkLine.js';
import './Spinner.js';
import './Switch.js';
import './Textarea.js';
import './TitleBar.js';
import './Toast.js';
import './Tooltip.js';
import './TooltipWrapper.js';
import './Tree.js';
import './Alert2.js';
import './Transfer.js';
import './TabsTransfer.js';
import './ResultBox.js';
import './InputBox.js';
import './ListGroup.js';
import './NumberInput.js';
import './ArrayInput.js';
import './SearchBox.js';
import './AnchorNav.js';
import './Selection.js';
import './GroupedSelection.js';
import './ChainedSelection.js';
import './TableSelection.js';
import './TreeSelection.js';
import './AssociatedSelection.js';
import './PullRefresh.js';
import './table/index.js';
import './schema-editor/SchemaVariableListPicker.js';
import './schema-editor/SchemaVariableList.js';
import './formula/VariableList.js';
import './formula/Picker.js';
import './formula/Editor.js';
import './formula/CodeEditor.js';
import './PickerContainer.js';
import './json-schema/index.js';
import './Badge.js';
import './WithRemoteConfig.js';
import './condition-builder/index.js';
import './CityArea.js';
import './ListMenu.js';
import './Input.js';
import './schema-editor/index.js';
import './LocationPicker.js';
import './PopUp.js';
import './Cascader.js';
import './TransferDropDown.js';
import './TabsTransferPicker.js';
import './ResultList.js';
import './TransferPicker.js';
import './UserSelect.js';
import './UserTabSelect.js';
import './table/HeadCellDropDown.js';
import './Card.js';
import './GridNav.js';
import './Link.js';
import './virtual-list/index.js';
import 'hoist-non-react-statics';
import 'mobx-state-tree';
import 'mobx-react';
import './PopOverContainer.js';
import './Pagination.js';
import './Progress.js';
import './Steps.js';
import './Tag.js';
import './Timeline.js';
import './ImageGallery.js';
import './BaiduMapPicker.js';
import './MultilineText.js';
import './Form.js';
import './FormField.js';
import './Combo.js';
import './InputTable.js';
import './ConfirmBox.js';
import './DndContainer.js';
import './menu/index.js';
import './InputBoxWithSuggestion.js';
import './CodeMirror.js';
import './OverflowTpl.js';
import './VerificationCode.js';
import './Shape.js';
import 'amis-ui';
import 'lodash/debounce';
import 'react-overlays';
import './DropdownContextMenus.js';
import 'lodash/isFunction';
import 'lodash/pick';
import '../locale/zh-CN.js';
import '../locale/en-US.js';
import '../locale/de-DE.js';
import '../themes/cxd.js';
import '../themes/ang.js';
import '../themes/antd.js';
import '../themes/dark.js';
import './schema-editor/Common.js';

/**
 * @file Signature.tsx 签名组件
 *
 * @created: 2024/03/04
 */
var Signature = function (props) {
    var __ = props.translate, cx = props.classnames, className = props.className, width = props.width, height = props.height;
    var _a = __read(React__default.useState(null), 2), sign = _a[0], setSign = _a[1];
    var _b = __read(React__default.useState(false), 2), open = _b[0], setOpen = _b[1];
    var _c = __read(React__default.useState(false), 2), fullScreen = _c[0], setFullScreen = _c[1];
    var _d = __read(React__default.useState(props.embed || false), 2), embed = _d[0], setEmbed = _d[1];
    var _e = __read(React__default.useState(props.value), 2), data = _e[0], setData = _e[1];
    var wrapper = React__default.useRef(null);
    React__default.useEffect(function () {
        if (!wrapper.current) {
            return;
        }
        var unSensor = resizeSensor(wrapper.current, resize);
        return function () {
            setSign(null);
            unSensor();
        };
    }, []);
    React__default.useEffect(function () { return setData(props.value); }, [props.value]);
    React__default.useEffect(function () { return setEmbed(props.embed || false); }, [props.embed]);
    var clear = React__default.useCallback(function () {
        var _a;
        if (sign) {
            sign.clear();
        }
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, undefined);
    }, [sign]);
    var undo = React__default.useCallback(function () {
        if (sign) {
            sign.undo();
        }
    }, [sign]);
    var confirm = React__default.useCallback(function () {
        var _a;
        if (sign) {
            var base64 = sign.toDataURL();
            setData(base64);
            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, base64);
        }
    }, [sign]);
    var resize = React__default.useCallback(function () {
        setSign(null);
    }, []);
    var handleFullScreen = React__default.useCallback(function () {
        setFullScreen(true);
        setSign(null);
    }, []);
    var handleUnFullScreen = React__default.useCallback(function () {
        setFullScreen(false);
        setSign(null);
    }, []);
    var handleCloseModal = React__default.useCallback(function () {
        setOpen(false);
        setFullScreen(false);
        setSign(null);
    }, []);
    var handleConfirmModal = React__default.useCallback(function () {
        confirm();
        handleCloseModal();
    }, [sign]);
    var initCanvas = React__default.useCallback(function (element) {
        var width = props.width, height = props.height;
        var clientWidth = element.parentElement.clientWidth;
        var clientHeight = element.parentElement.clientHeight;
        var defaultWidth = width || clientWidth - (fullScreen ? 40 : 0);
        var defaultHeight = fullScreen
            ? clientHeight
            : Math.min(height || clientWidth / 2 - 40, clientHeight - 40);
        var signature = new SmoothSignature(element, {
            width: Math.max(defaultWidth, 200),
            height: Math.max(defaultHeight, 160),
            color: props.color || '#000',
            bgColor: props.bgColor || '#efefef'
        });
        setSign(signature);
    }, [width, height, fullScreen]);
    React__default.useEffect(function () {
        if (data && sign) {
            sign.loadFromBase64(data);
        }
    }, [data, sign]);
    function embedCanvasRef(ref) {
        if (open && ref && !sign) {
            initCanvas(ref);
        }
    }
    function canvasRef(ref) {
        if (ref && !sign) {
            initCanvas(ref);
        }
    }
    function renderTool(right) {
        if (right === void 0) { right = true; }
        var clearBtnLabel = props.clearBtnLabel, clearBtnIcon = props.clearBtnIcon, undoBtnLabel = props.undoBtnLabel, undoBtnIcon = props.undoBtnIcon, confirmBtnLabel = props.confirmBtnLabel, confirmBtnIcon = props.confirmBtnIcon, embedConfirmLabel = props.embedConfirmLabel, embedConfirmIcon = props.embedConfirmIcon, ebmedCancelLabel = props.ebmedCancelLabel, ebmedCancelIcon = props.ebmedCancelIcon;
        return (React__default.createElement("div", { className: cx('Signature-Tool') },
            React__default.createElement("div", { className: "actions" },
                React__default.createElement("div", { className: "left-actions" },
                    React__default.createElement(Button, { onClick: clear, tooltip: clearBtnLabel || __('Signature.clear') },
                        clearBtnLabel,
                        React__default.createElement(Icon, { icon: clearBtnIcon || 'close', className: cx('icon', { 'ml-1': clearBtnLabel }) })),
                    React__default.createElement(Button, { onClick: undo, tooltip: undoBtnLabel || __('Signature.undo') },
                        undoBtnLabel,
                        React__default.createElement(Icon, { icon: undoBtnIcon || 'undo-normal', className: cx('icon', { 'ml-1': undoBtnLabel }) })),
                    fullScreen ? (React__default.createElement(Button, { onClick: handleUnFullScreen },
                        React__default.createElement(Icon, { icon: "un-fullscreen", className: "icon" }))) : (React__default.createElement(Button, { onClick: handleFullScreen },
                        React__default.createElement(Icon, { icon: "full-screen", className: "icon" })))),
                right ? (React__default.createElement("div", { className: "right-actions" }, embed ? (React__default.createElement(React__default.Fragment, null,
                    React__default.createElement(Button, { onClick: handleCloseModal },
                        ebmedCancelLabel || __('Signature.cancel'),
                        React__default.createElement(Icon, { icon: ebmedCancelIcon, className: "icon ml-1" })),
                    React__default.createElement(Button, { onClick: handleConfirmModal, level: "primary" },
                        embedConfirmLabel || __('Signature.confirm'),
                        React__default.createElement(Icon, { icon: embedConfirmIcon, className: "icon ml-1" })))) : (React__default.createElement(Button, { onClick: confirm, level: "primary" },
                    confirmBtnLabel || __('Signature.confirm'),
                    React__default.createElement(Icon, { icon: confirmBtnIcon, className: "icon ml-1" }))))) : null)));
    }
    function renderEmbedSignature() {
        var embedConfirmLabel = props.embedConfirmLabel, ebmedCancelLabel = props.ebmedCancelLabel, icon = props.embedBtnIcon, embedBtnLabel = props.embedBtnLabel, embedConfirmIcon = props.embedConfirmIcon, ebmedCancelIcon = props.ebmedCancelIcon;
        return (React__default.createElement("div", { className: cx('Signature-Embed') },
            React__default.createElement(Button, { onClick: function () { return setOpen(true); } },
                React__default.createElement(Icon, { className: "icon mr-1", icon: icon || 'fas fa-pen' }),
                embedBtnLabel || __('Signature.embedLabel')),
            data ? (React__default.createElement("div", { className: cx('Signature-Embed-Preview') },
                React__default.createElement("img", { src: data }),
                React__default.createElement(Icon, { className: "preview-close", icon: "fas fa-close", onClick: clear }))) : null,
            React__default.createElement(FinalModal, { show: open, onHide: handleCloseModal, size: "full" },
                React__default.createElement(FinalModal.Body, null,
                    React__default.createElement("div", { className: cx('Signature-Embed-Body', {
                            'is-fullScreen': fullScreen
                        }) },
                        React__default.createElement("canvas", { className: cx('Signature-canvas'), ref: embedCanvasRef }),
                        renderTool(fullScreen))),
                fullScreen ? null : (React__default.createElement(FinalModal.Footer, null,
                    React__default.createElement(Button, { onClick: handleCloseModal },
                        ebmedCancelLabel || __('Signature.cancel'),
                        React__default.createElement(Icon, { icon: ebmedCancelIcon, className: "icon ml-1" })),
                    React__default.createElement(Button, { onClick: handleConfirmModal, level: "primary" },
                        embedConfirmLabel || __('Signature.confirm'),
                        React__default.createElement(Icon, { icon: embedConfirmIcon, className: "icon ml-1" })))))));
    }
    return (React__default.createElement("div", { className: cx(className) },
        React__default.createElement("div", { className: cx('Signature', {
                'is-fullScreen': fullScreen
            }), ref: wrapper }, embed ? (renderEmbedSignature()) : (React__default.createElement(React__default.Fragment, null,
            React__default.createElement("canvas", { className: cx('Signature-canvas'), ref: canvasRef }),
            renderTool())))));
};
var Signature$1 = themeable(localeable(Signature));

export { Signature$1 as default };
