import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Checkbox } from "../../../checkbox";
import { CircleCloseIcon } from "../../../icon";
import { Input } from "../../../input";
import { toast } from "../../../toast";
import { useRef, useState } from "react";
export const Message = (props)=>{
    const { message, setMessage, check, setCheck } = props;
    const [focus, setFocus] = useState(false);
    const inputRef = useRef(null);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-mt-4 orderly-mb-7 orderly-flex orderly-items-center",
        children: [
            /*#__PURE__*/ _jsx(Checkbox, {
                checked: check,
                onCheckedChange: (e)=>{
                    setCheck(e);
                }
            }),
            /*#__PURE__*/ _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__*/ _jsx("div", {
                className: "orderly-bg-base-900 orderly-mx-2 orderly-rounded-sm",
                children: /*#__PURE__*/ _jsx(Input, {
                    ref: inputRef,
                    placeholder: "Max 25 characters",
                    containerClassName: "orderly-bg-transparent orderly-h-[32px] orderly-w-[295px]",
                    value: message,
                    autoFocus: false,
                    suffix: focus && /*#__PURE__*/ _jsx("button", {
                        className: "orderly-mr-3 orderly-cursor-pointer",
                        onMouseDown: (e)=>{
                            ;
                            setMessage("");
                            setTimeout(()=>{
                                inputRef.current?.focus();
                            }, 50);
                            e.stopPropagation();
                        },
                        children: /*#__PURE__*/ _jsx(CircleCloseIcon, {
                            size: 18
                        })
                    }),
                    onFocus: ()=>setFocus(true),
                    onBlur: ()=>setFocus(false),
                    onChange: (e)=>{
                        if (e.target.value.length > 25) {
                            toast.error("Maximum support of 25 characters");
                            return;
                        }
                        setCheck(e.target.value.length > 0);
                        setMessage(e.target.value);
                    }
                })
            })
        ]
    });
};

//# sourceMappingURL=message.js.map