{"version":3,"sources":["../ui/src/components/player-components/comments/addComment.tsx"],"sourcesContent":["import Image from \"next/image\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"redux-share/hooks\";\r\nimport { ConditionName, IAddCommentProps, zIndex } from \"interfaces\";\r\nimport { conditions } from \"helpers\";\r\nimport IMAGES from \"../../../../../images/importImages\";\r\nimport { handleSubmitComment } from \"redux-share/actions/comment.action\";\r\nimport { setReplyToAuthor } from \"redux-share/slices/commentsSlice\";\r\nimport { getLoginZarebinUrl } from \"../../../../../services\";\r\nimport { shallowEqual } from 'react-redux'\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst CloseIcon = dynamic(() => import(\"../../icon-components/closeIcon\"));\r\nconst EmojiPicker = dynamic(() => import(\"../emojiPicker/emojiPicker\"));\r\n\r\nconst AddComment = ({ type, setShowReplyBox }: IAddCommentProps) => {\r\n\r\n    const [inputValue, setInputValue] = useState<string>(\"\");\r\n    const [selectedEmoji, setSelectedEmoji] = useState<string>(\"\");\r\n    const [showEmojiPickerPopover, setShowEmojiPickerPopover] = useState<boolean>(false);\r\n    \r\n    const dispatch = useAppDispatch();\r\n    const { replyToAuthor } = useAppSelector(({ comments: { replyToAuthor, canAddComment } }) => ({ replyToAuthor, canAddComment }), shallowEqual);\r\n    useAppSelector(({ user: { isLogin } }) => ({ isLogin }), shallowEqual);\r\n\r\n    const inputValueRef = useRef<string>(inputValue);\r\n    const selectedEmojiRef = useRef<string>(selectedEmoji);\r\n\r\n    useEffect(() => {\r\n        inputValueRef.current = inputValue;\r\n    },[inputValue])\r\n\r\n    useEffect(() => {\r\n        selectedEmojiRef.current = selectedEmoji;\r\n    }, [selectedEmoji])\r\n\r\n\r\n    useEffect(() => {\r\n        if (selectedEmoji) {\r\n            setInputValue(`${inputValue}${selectedEmoji}`);\r\n            setSelectedEmoji(\"\");\r\n        }\r\n    }, [selectedEmoji])\r\n\r\n    useEffect(() => {\r\n        const handleSendCommentInputKeyPress = (event:any) => {\r\n            if (event.key === \"Enter\" && event.target.id === \"send-comment-input\" && (!!inputValueRef.current || !!selectedEmoji)) handleSubmitComment(inputValueRef.current, setInputValue,selectedEmojiRef.current,setSelectedEmoji,type, setShowReplyBox);\r\n        }\r\n        document.addEventListener(\"keypress\", handleSendCommentInputKeyPress);\r\n        return () => document.removeEventListener(\"keypress\",handleSendCommentInputKeyPress);\r\n    },[])\r\n\r\n    const emojiListIcon = <Image alt=\"emoji-list-icon\" src={conditions(ConditionName.isDarkMode) ? (showEmojiPickerPopover ? IMAGES.emojiHappyWhite : IMAGES.keyboardWhite) : (showEmojiPickerPopover ? IMAGES.emojiHappyBlack : IMAGES.keyboardBlack)} onClick={() => setShowEmojiPickerPopover(!showEmojiPickerPopover)} className=\"pl-cursor-pointer\" width={24} height={24} />\r\n    const commentInput = (\r\n        <input\r\n            id=\"send-comment-input\"\r\n            className={`pl-text-gray-600 pl-pt-[2px] dark:pl-text-secondary pl-font-normal placeholder:pl-text-gray-600 placeholder:dark:pl-text-secondary pl-w-full pl-bg-transparent pl-outline-none pl-border-none ${conditions(ConditionName.isTouchScreen) ? \"pl-text-[12px]\" : \"pl-text-[14px]\"}`}\r\n            placeholder={type === \"reply\" ? \"پاسخ خود را وارد کنید\" : \"دیدگاه خود را وارد کنید\"}\r\n            onChange={(event: any) => setInputValue(event.target.value)}\r\n            maxLength={200}\r\n            value={inputValue}\r\n        />\r\n    )\r\n    const sendCommentIcon = <Image alt=\"send-comment\" src={conditions(ConditionName.isTouchScreen) ? IMAGES.sendCommentTouchScreen : (conditions(ConditionName.isDarkMode) ? IMAGES.sendCommentDesktopWhite : IMAGES.sendCommentDesktopBlack)} onClick={() => handleSubmitComment(inputValue, setInputValue, selectedEmoji, setSelectedEmoji, type, setShowReplyBox)} className=\"pl-cursor-pointer\" width={conditions(ConditionName.isTouchScreen) ? 40 : 24} height={conditions(ConditionName.isTouchScreen) ? 40 : 24} />;\r\n\r\n    const addCommentContent = conditions(ConditionName.isTouchScreen) ? (\r\n        <div className={`pl-absolute pl-bottom-0 pl-w-full pl-flex pl-flex-col pl-justify-end ${showEmojiPickerPopover && \"pl-h-full\"}`}>\r\n            {type === \"reply\" && (\r\n                <div className=\"pl-flex pl-justify-between pl-items-center pl-text-[14px] pl-font-normal pl-bg-gray-highLight dark:pl-bg-z-gray-500 pl-text-secondary-500 pl-pr-8 pl-pl-4 pl-py-[9px] pl-relative\" style={{ zIndex: zIndex.comments }}>\r\n                    <span> در حال پاسخ به {replyToAuthor.author ? replyToAuthor.author : \"کاربر ناشناس\"}</span>\r\n                    <CloseIcon className=\"pl-w-6 pl-h-6 pl-stroke-gray-800 dark:pl-stroke-dark-5\" onClick={() => dispatch(setReplyToAuthor({}))} />\r\n                </div>\r\n            )}\r\n            <div className=\"pl-border-t pl-border-z-secondary-600 pl-bg-white dark:pl-bg-dark-3 pl-px-4 pl-py-3 pl-flex pl-items-center pl-gap-4 pl-relative pl-z-10\">\r\n                {conditions(ConditionName.isLogin) ? (\r\n                    <>\r\n                        {conditions(ConditionName.canAddComment) ? (\r\n                            <>\r\n                                <div className=\"pl-flex pl-flex-1 pl-items-center pl-gap-1 pl-bg-gray-highLight dark:pl-bg-dark-1 pl-py-2 pl-px-3 pl-rounded-[20px]\">\r\n                                    {emojiListIcon}\r\n                                    {commentInput}\r\n                                    <div className=\"pl-text-[11px] pl-font-normal\">\r\n                                        <span>{inputValue.length}</span>\r\n                                        <span>/</span>\r\n                                        <span>200</span>\r\n                                    </div>\r\n                                </div>\r\n                                {sendCommentIcon}\r\n                            </>\r\n                        ) : <p className=\"pl-flex pl-flex-1 pl-items-center pl-gap-1 pl-bg-gray-highLight dark:pl-bg-dark-1 pl-py-2 pl-px-3 pl-rounded-[20px] pl-text-[14px] pl-font-normal pl-text-secondary/[0.7]\">در حال حاضر امکان ثبت دیدگاه وجود ندارد.</p>}\r\n                    </>\r\n                ) : <p className=\"pl-flex pl-flex-1 pl-items-center pl-gap-1 pl-bg-gray-highLight dark:pl-bg-dark-1 pl-py-2 pl-px-3 pl-rounded-[20px] pl-text-secondary pl-text-[14px] pl-font-normal\">شما برای ارسال دیدگاه خود باید {conditions(ConditionName.isZarebinSite) ? <a href={getLoginZarebinUrl()} className=\"text-primary-600 border-b cursor-pointer border-primary-600\">وارد</a> : \"وارد\"} شوید.</p>}\r\n            </div>\r\n            {showEmojiPickerPopover && <EmojiPicker enableUnified={false} setSelectedEmoji={setSelectedEmoji} onClickOutside={() => setShowEmojiPickerPopover(false)} parentClassName=\"pl-bottom-[60px]\"  />}\r\n        </div>\r\n    ) : (\r\n        <div className={`${type !== \"reply\" && \"pl-border-b pl-border-secondary-300 dark:pl-border-gray-700\"} pl-w-full`}>\r\n                <div className={`pl-w-full pl-bg-gray-highLight dark:pl-bg-dark-2 pl-rounded-[20px] pl-py-3 pl-pr-4 pl-pl-6 pl-flex pl-items-center pl-gap-4 pl-relative ${type === \"reply\" ? \"pl-my-2\" : \"pl-my-6\"}`}>\r\n                {conditions(ConditionName.isLogin) ? (\r\n                    <>\r\n                        {conditions(ConditionName.canAddComment) ? (\r\n                            <>\r\n                                {emojiListIcon}\r\n                                {commentInput}\r\n                                {sendCommentIcon}\r\n                            </>\r\n                        ) : (\r\n                            <p className=\"pl-text-[14px] pl-font-normal pl-text-secondary/[0.7]\">در حال حاضر امکان ثبت دیدگاه وجود ندارد.</p>\r\n                        )}                \r\n                    </>\r\n                    ) : <p className=\"pl-text-secondary pl-text-[14px] pl-font-normal\">شما برای ارسال دیدگاه خود باید {conditions(ConditionName.isZarebinSite) ? <a href={getLoginZarebinUrl()} className=\"pl-text-primary-600 pl-border-b pl-cursor-pointer pl-border-primary-600\">وارد</a> : \"وارد\"} شوید.</p>}\r\n                {type === \"reply\" && <button className=\"pl-text-[15px] pl-font-normal\" onClick={() => setShowReplyBox && setShowReplyBox(false)}>لغو</button>}\r\n                {showEmojiPickerPopover && <EmojiPicker enableUnified={false} setSelectedEmoji={setSelectedEmoji} onClickOutside={() => setShowEmojiPickerPopover(false)} parentClassName=\"pl-bottom-[60px]\" />}\r\n            </div>\r\n        </div>\r\n    )\r\n\r\n    return addCommentContent\r\n}\r\n\r\nexport default AddComment;"],"mappings":"+NAAAA,IAAA,OAAOC,MAAW,aAClB,OAAS,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAQ5C,OAAS,gBAAAC,MAAoB,cAC7B,OAAOC,MAAa,eA0CM,OAyBE,YAAAC,EAzBF,OAAAC,EAiBN,QAAAC,MAjBM,oBAxC1B,IAAMC,EAAYJ,EAAQ,IAAM,OAAO,0BAAiC,CAAC,EACnEK,EAAcL,EAAQ,IAAM,OAAO,4BAA4B,CAAC,EAEhEM,EAAa,CAAC,CAAE,KAAAC,EAAM,gBAAAC,CAAgB,IAAwB,CAEhE,GAAM,CAACC,EAAYC,CAAa,EAAIC,EAAiB,EAAE,EACjD,CAACC,EAAeC,CAAgB,EAAIF,EAAiB,EAAE,EACvD,CAACG,EAAwBC,CAAyB,EAAIJ,EAAkB,EAAK,EAE7EK,EAAWC,EAAe,EAC1B,CAAE,cAAAC,CAAc,EAAIC,EAAe,CAAC,CAAE,SAAU,CAAE,cAAAD,EAAe,cAAAE,CAAc,CAAE,KAAO,CAAE,cAAAF,EAAe,cAAAE,CAAc,GAAIrB,CAAY,EAC7IoB,EAAe,CAAC,CAAE,KAAM,CAAE,QAAAE,CAAQ,CAAE,KAAO,CAAE,QAAAA,CAAQ,GAAItB,CAAY,EAErE,IAAMuB,EAAgBC,EAAed,CAAU,EACzCe,EAAmBD,EAAeX,CAAa,EAErDa,EAAU,IAAM,CACZH,EAAc,QAAUb,CAC5B,EAAE,CAACA,CAAU,CAAC,EAEdgB,EAAU,IAAM,CACZD,EAAiB,QAAUZ,CAC/B,EAAG,CAACA,CAAa,CAAC,EAGlBa,EAAU,IAAM,CACRb,IACAF,EAAc,GAAGD,CAAU,GAAGG,CAAa,EAAE,EAC7CC,EAAiB,EAAE,EAE3B,EAAG,CAACD,CAAa,CAAC,EAElBa,EAAU,IAAM,CACZ,IAAMC,EAAkCC,GAAc,CAC9CA,EAAM,MAAQ,SAAWA,EAAM,OAAO,KAAO,uBAA2BL,EAAc,SAAaV,IAAgBgB,EAAoBN,EAAc,QAASZ,EAAcc,EAAiB,QAAQX,EAAiBN,EAAMC,CAAe,CACnP,EACA,gBAAS,iBAAiB,WAAYkB,CAA8B,EAC7D,IAAM,SAAS,oBAAoB,WAAWA,CAA8B,CACvF,EAAE,CAAC,CAAC,EAEJ,IAAMG,EAAgB3B,EAAC4B,EAAA,CAAM,IAAI,kBAAkB,IAAKC,cAAmC,EAAKjB,EAAyBkB,EAAO,gBAAkBA,EAAO,cAAkBlB,EAAyBkB,EAAO,gBAAkBA,EAAO,cAAgB,QAAS,IAAMjB,EAA0B,CAACD,CAAsB,EAAG,UAAU,oBAAoB,MAAO,GAAI,OAAQ,GAAI,EACtWmB,EACF/B,EAAC,SACG,GAAG,qBACH,UAAW,iMAAiM6B,iBAAsC,EAAI,iBAAmB,gBAAgB,GACzR,YAAaxB,IAAS,QAAU,6GAA0B,yHAC1D,SAAWoB,GAAejB,EAAciB,EAAM,OAAO,KAAK,EAC1D,UAAW,IACX,MAAOlB,EACX,EAEEyB,EAAkBhC,EAAC4B,EAAA,CAAM,IAAI,eAAe,IAAKC,iBAAsC,EAAIC,EAAO,uBAA0BD,cAAmC,EAAIC,EAAO,wBAA0BA,EAAO,wBAA0B,QAAS,IAAMJ,EAAoBnB,EAAYC,EAAeE,EAAeC,EAAkBN,EAAMC,CAAe,EAAG,UAAU,oBAAoB,MAAOuB,iBAAsC,EAAI,GAAK,GAAI,OAAQA,iBAAsC,EAAI,GAAK,GAAI,EAsDrf,OApD0BA,iBAAsC,EAC5D5B,EAAC,OAAI,UAAW,wEAAwEW,GAA0B,WAAW,GACxH,UAAAP,IAAS,SACNJ,EAAC,OAAI,UAAU,oLAAoL,MAAO,CAAE,QAAwB,EAChO,UAAAA,EAAC,QAAK,oFAAiBe,EAAc,OAASA,EAAc,OAAS,uEAAe,EACpFhB,EAACE,EAAA,CAAU,UAAU,yDAAyD,QAAS,IAAMY,EAASmB,EAAiB,CAAC,CAAC,CAAC,EAAG,GACjI,EAEJjC,EAAC,OAAI,UAAU,2IACV,SAAA6B,WAAgC,EAC7B7B,EAAAD,EAAA,CACK,SAAA8B,iBAAsC,EACnC5B,EAAAF,EAAA,CACI,UAAAE,EAAC,OAAI,UAAU,sHACV,UAAA0B,EACAI,EACD9B,EAAC,OAAI,UAAU,gCACX,UAAAD,EAAC,QAAM,SAAAO,EAAW,OAAO,EACzBP,EAAC,QAAK,aAAC,EACPA,EAAC,QAAK,eAAG,GACb,GACJ,EACCgC,GACL,EACAhC,EAAC,KAAE,UAAU,4KAA4K,oNAAwC,EACzO,EACAC,EAAC,KAAE,UAAU,sKAAsK,yKAAgC4B,iBAAsC,EAAI7B,EAAC,KAAE,KAAMkC,EAAmB,EAAG,UAAU,8DAA8D,oCAAI,EAAO,2BAAO,8BAAM,EACpY,EACCtB,GAA0BZ,EAACG,EAAA,CAAY,cAAe,GAAO,iBAAkBQ,EAAkB,eAAgB,IAAME,EAA0B,EAAK,EAAG,gBAAgB,mBAAoB,GAClM,EAEAb,EAAC,OAAI,UAAW,GAAGK,IAAS,SAAW,6DAA6D,aAC5F,SAAAJ,EAAC,OAAI,UAAW,2IAA2II,IAAS,QAAU,UAAY,SAAS,GAClM,UAAAwB,WAAgC,EAC7B7B,EAAAD,EAAA,CACK,SAAA8B,iBAAsC,EACnC5B,EAAAF,EAAA,CACK,UAAA4B,EACAI,EACAC,GACL,EAEAhC,EAAC,KAAE,UAAU,wDAAwD,oNAAwC,EAErH,EACIC,EAAC,KAAE,UAAU,kDAAkD,yKAAgC4B,iBAAsC,EAAI7B,EAAC,KAAE,KAAMkC,EAAmB,EAAG,UAAU,0EAA0E,oCAAI,EAAO,2BAAO,8BAAM,EAC3R7B,IAAS,SAAWL,EAAC,UAAO,UAAU,gCAAgC,QAAS,IAAMM,GAAmBA,EAAgB,EAAK,EAAG,8BAAG,EACnIM,GAA0BZ,EAACG,EAAA,CAAY,cAAe,GAAO,iBAAkBQ,EAAkB,eAAgB,IAAME,EAA0B,EAAK,EAAG,gBAAgB,mBAAmB,GACjM,EACJ,CAIR,EAEOsB,GAAQ/B","names":["init_esm_shims","Image","useEffect","useRef","useState","shallowEqual","dynamic","Fragment","jsx","jsxs","CloseIcon","EmojiPicker","AddComment","type","setShowReplyBox","inputValue","setInputValue","useState","selectedEmoji","setSelectedEmoji","showEmojiPickerPopover","setShowEmojiPickerPopover","dispatch","useAppDispatch","replyToAuthor","useAppSelector","canAddComment","isLogin","inputValueRef","useRef","selectedEmojiRef","useEffect","handleSendCommentInputKeyPress","event","handleSubmitComment","emojiListIcon","Image","conditions","importImages_default","commentInput","sendCommentIcon","setReplyToAuthor","getLoginZarebinUrl","addComment_default"]}