/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var amisCore = require('amis-core');
var SmoothSignature = require('smooth-signature');
var Button = require('./Button.js');
require('./404.js');
require('./Alert.js');
require('./ContextMenu.js');
require('./AsideNav.js');
require('./Avatar.js');
require('./Breadcrumb.js');
require('./Checkbox.js');
require('./Collapse.js');
require('./CollapseGroup.js');
require('./DatePicker.js');
require('./DateRangePicker.js');
require('./Drawer.js');
require('./Tabs.js');
require('./Editor.js');
require('./DiffEditor.js');
require('./Html.js');
var icons = require('./icons.js');
require('./Layout.js');
var Modal = require('./Modal.js');
require('./Radios.js');
require('./Range.js');
require('./Rating.js');
require('./Select.js');
require('./SparkLine.js');
var Spinner = require('./Spinner.js');
require('./Switch.js');
require('./Textarea.js');
require('./TitleBar.js');
require('./Toast.js');
require('./Tooltip.js');
require('./TooltipWrapper.js');
require('./Tree.js');
require('./Alert2.js');
require('./Transfer.js');
require('./TabsTransfer.js');
require('./ResultBox.js');
require('./InputBox.js');
require('./ListGroup.js');
require('./NumberInput.js');
require('./ArrayInput.js');
require('./SearchBox.js');
require('./AnchorNav.js');
require('./Selection.js');
require('./GroupedSelection.js');
require('./ChainedSelection.js');
require('./TableSelection.js');
require('./TreeSelection.js');
require('./AssociatedSelection.js');
require('./PullRefresh.js');
require('./table/index.js');
require('./schema-editor/SchemaVariableListPicker.js');
require('./schema-editor/SchemaVariableList.js');
require('./formula/VariableList.js');
require('./formula/Picker.js');
require('./formula/Editor.js');
require('./formula/CodeEditor.js');
require('./PickerContainer.js');
require('./json-schema/index.js');
require('./Badge.js');
require('./WithRemoteConfig.js');
require('./condition-builder/index.js');
require('./CityArea.js');
require('./ListMenu.js');
require('./Input.js');
require('./schema-editor/index.js');
require('./LocationPicker.js');
require('./PopUp.js');
require('./Cascader.js');
require('./TransferDropDown.js');
require('./TabsTransferPicker.js');
require('./ResultList.js');
require('./TransferPicker.js');
require('./UserSelect.js');
require('./UserTabSelect.js');
require('./table/HeadCellDropDown.js');
require('./Card.js');
require('./GridNav.js');
require('./Link.js');
require('./virtual-list/index.js');
require('./WithStore.js');
require('./PopOverContainer.js');
require('./Pagination.js');
require('./Progress.js');
require('./Steps.js');
require('./Tag.js');
require('./Timeline.js');
require('./ImageGallery.js');
require('./BaiduMapPicker.js');
require('./MultilineText.js');
require('./Form.js');
require('./FormField.js');
require('./Combo.js');
require('./InputTable.js');
require('./ConfirmBox.js');
require('./DndContainer.js');
require('./menu/index.js');
require('./InputBoxWithSuggestion.js');
require('./CodeMirror.js');
require('./OverflowTpl.js');
require('./VerificationCode.js');
require('./Slider.js');
require('./Shape.js');
require('./MobileDevTool.js');
require('./DropdownContextMenus.js');
require('./HorizontalScroll.js');
require('./AutoFoldedList.js');
require('./AlphabetIndexer.js');
require('./MixedInput.js');
require('lodash/isFunction');
require('lodash/pick');
require('../locale/zh-CN.js');
require('../locale/en-US.js');
require('../locale/de-DE.js');
require('../themes/cxd.js');
require('../themes/ang.js');
require('../themes/antd.js');
require('../themes/dark.js');
require('./schema-editor/Common.js');
require('../HTMLFilterContext.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var SmoothSignature__default = /*#__PURE__*/_interopDefaultLegacy(SmoothSignature);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
var Signature = function (props) {
    var __ = props.translate, cx = props.classnames, className = props.className, width = props.width, height = props.height;
    var embedMobile = props.embed && amisCore.isMobileDevice() && window.innerWidth < 768;
    var _a = tslib.__read(React__default["default"].useState(null), 2), sign = _a[0], setSign = _a[1];
    var _b = tslib.__read(React__default["default"].useState(false), 2), open = _b[0], setOpen = _b[1];
    var _c = tslib.__read(React__default["default"].useState(false), 2), uploading = _c[0], setUploading = _c[1];
    var _d = tslib.__read(React__default["default"].useState(!!embedMobile), 2), fullScreen = _d[0], setFullScreen = _d[1];
    var _e = tslib.__read(React__default["default"].useState(props.embed || false), 2), embed = _e[0], setEmbed = _e[1];
    var _f = tslib.__read(React__default["default"].useState(props.value), 2), data = _f[0], setData = _f[1];
    var wrapper = React__default["default"].useRef(null);
    React__default["default"].useEffect(function () {
        if (!wrapper.current) {
            return;
        }
        var unSensor = amisCore.resizeSensor(wrapper.current, resize);
        return function () {
            setSign(null);
            unSensor();
        };
    }, []);
    React__default["default"].useEffect(function () { return setData(props.value); }, [props.value]);
    React__default["default"].useEffect(function () { return setEmbed(props.embed || false); }, [props.embed]);
    var clear = React__default["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["default"].useCallback(function () {
        if (sign) {
            sign.undo();
        }
    }, [sign]);
    var confirm = React__default["default"].useCallback(function () {
        var _a;
        if (!sign) {
            return;
        }
        var base64 = fullScreen
            ? sign.getRotateCanvas(-90).toDataURL()
            : sign.toDataURL();
        setData(base64);
        setUploading(true);
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, base64).then(function () {
            setUploading(false);
        });
    }, [sign]);
    var resize = React__default["default"].useCallback(function () {
        setSign(null);
    }, []);
    var handleFullScreen = React__default["default"].useCallback(function () {
        setFullScreen(true);
        setSign(null);
    }, []);
    var handleUnFullScreen = React__default["default"].useCallback(function () {
        setFullScreen(false);
        setSign(null);
    }, []);
    var handleCloseModal = React__default["default"].useCallback(function () {
        setOpen(false);
        setFullScreen(!!embedMobile);
        setSign(null);
    }, []);
    var handleConfirmModal = React__default["default"].useCallback(function () {
        confirm();
        handleCloseModal();
    }, [sign]);
    var initCanvas = React__default["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__default["default"](element, {
            width: Math.max(defaultWidth, 200),
            height: Math.max(defaultHeight, 160),
            color: props.color || '#000',
            bgColor: props.bgColor || '#efefef'
        });
        setSign(signature);
    }, [width, height, fullScreen]);
    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 (_J$X_("div", { className: cx('Signature-Tool') },
            _J$X_("div", { className: "actions" },
                _J$X_("div", { className: "left-actions" },
                    _J$X_(Button["default"], { onClick: clear, tooltip: clearBtnLabel || __('Signature.clear') },
                        clearBtnLabel,
                        _J$X_(icons.Icon, { icon: clearBtnIcon || 'close', className: cx('icon', { 'ml-1': clearBtnLabel }) })),
                    _J$X_(Button["default"], { onClick: undo, tooltip: undoBtnLabel || __('Signature.undo') },
                        undoBtnLabel,
                        _J$X_(icons.Icon, { icon: undoBtnIcon || 'undo-normal', className: cx('icon', { 'ml-1': undoBtnLabel }) })),
                    embedMobile ? null : fullScreen ? (_J$X_(Button["default"], { onClick: handleUnFullScreen },
                        _J$X_(icons.Icon, { icon: "un-fullscreen", className: "icon" }))) : (_J$X_(Button["default"], { onClick: handleFullScreen },
                        _J$X_(icons.Icon, { icon: "full-screen", className: "icon" })))),
                right ? (_J$X_("div", { className: "right-actions" }, embed ? (_J$X_(React__default["default"].Fragment, null,
                    _J$X_(Button["default"], { onClick: handleCloseModal },
                        ebmedCancelLabel || __('Signature.cancel'),
                        _J$X_(icons.Icon, { icon: ebmedCancelIcon, className: "icon ml-1" })),
                    _J$X_(Button["default"], { onClick: handleConfirmModal, level: "primary" },
                        embedConfirmLabel || __('Signature.confirm'),
                        _J$X_(icons.Icon, { icon: embedConfirmIcon, className: "icon ml-1" })))) : (_J$X_(Button["default"], { onClick: confirm, level: "primary" },
                    confirmBtnLabel || __('Signature.confirm'),
                    _J$X_(icons.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 (_J$X_("div", { className: cx('Signature-Embed') },
            _J$X_(Button["default"], { onClick: function () { return setOpen(true); } },
                _J$X_(icons.Icon, { className: "icon mr-1", icon: icon || 'fas fa-pen' }),
                embedBtnLabel || data
                    ? __('Signature.embedUpdateLabel')
                    : __('Signature.embedLabel')),
            data ? (_J$X_("div", { className: cx('Signature-Embed-Preview') }, uploading ? (_J$X_(Spinner["default"], { show: uploading })) : (_J$X_(React__default["default"].Fragment, null,
                _J$X_("img", { src: data }),
                _J$X_(icons.Icon, { className: "preview-close icon", icon: "close", onClick: clear }))))) : uploading ? (_J$X_("div", { className: cx('Signature-Embed-Preview') },
                _J$X_(Spinner["default"], { show: uploading }))) : null,
            _J$X_(Modal["default"], { show: open, onHide: handleCloseModal, size: "full" },
                _J$X_(Modal["default"].Body, null,
                    _J$X_("div", { className: cx('Signature-Embed-Body', {
                            'is-fullScreen': fullScreen
                        }) },
                        _J$X_("canvas", { className: cx('Signature-canvas'), ref: embedCanvasRef }),
                        renderTool(fullScreen))),
                fullScreen ? null : (_J$X_(Modal["default"].Footer, null,
                    _J$X_(Button["default"], { onClick: handleCloseModal },
                        ebmedCancelLabel || __('Signature.cancel'),
                        _J$X_(icons.Icon, { icon: ebmedCancelIcon, className: "icon ml-1" })),
                    _J$X_(Button["default"], { onClick: handleConfirmModal, level: "primary" },
                        embedConfirmLabel || __('Signature.confirm'),
                        _J$X_(icons.Icon, { icon: embedConfirmIcon, className: "icon ml-1" })))))));
    }
    return (_J$X_("div", { className: cx(className) },
        _J$X_("div", { className: cx('Signature', {
                'is-fullScreen': fullScreen
            }), ref: wrapper }, embed ? (renderEmbedSignature()) : (_J$X_(React__default["default"].Fragment, null,
            _J$X_("canvas", { className: cx('Signature-canvas'), ref: canvasRef }),
            renderTool())))));
};
var Signature$1 = amisCore.themeable(amisCore.localeable(Signature));

exports["default"] = Signature$1;
