"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Message", {
    enumerable: true,
    get: function() {
        return Message;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _checkbox = require("../../../checkbox");
const _icon = require("../../../icon");
const _input = require("../../../input");
const _toast = require("../../../toast");
const _react = require("react");
const Message = (props)=>{
    const { message, setMessage, check, setCheck } = props;
    const [focus, setFocus] = (0, _react.useState)(false);
    const inputRef = (0, _react.useRef)(null);
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: "orderly-mt-4 orderly-mb-7 orderly-flex orderly-items-center",
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)(_checkbox.Checkbox, {
                checked: check,
                onCheckedChange: (e)=>{
                    setCheck(e);
                }
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-text-xs orderly-text-base-contrast-54 orderly-ml-2 hover:orderly-cursor-pointer",
                onClick: ()=>{
                    setCheck(!props.check);
                },
                children: "Your message"
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-bg-base-900 orderly-mx-2 orderly-rounded-sm",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_input.Input, {
                    ref: inputRef,
                    placeholder: "Max 25 characters",
                    containerClassName: "orderly-bg-transparent orderly-h-[32px] orderly-w-[295px]",
                    value: message,
                    autoFocus: false,
                    suffix: focus && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
                        className: "orderly-mr-3 orderly-cursor-pointer",
                        onMouseDown: (e)=>{
                            ;
                            setMessage("");
                            setTimeout(()=>{
                                inputRef.current?.focus();
                            }, 50);
                            e.stopPropagation();
                        },
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.CircleCloseIcon, {
                            size: 18
                        })
                    }),
                    onFocus: ()=>setFocus(true),
                    onBlur: ()=>setFocus(false),
                    onChange: (e)=>{
                        if (e.target.value.length > 25) {
                            _toast.toast.error("Maximum support of 25 characters");
                            return;
                        }
                        setCheck(e.target.value.length > 0);
                        setMessage(e.target.value);
                    }
                })
            })
        ]
    });
};

//# sourceMappingURL=message.js.map