{"version":3,"sources":["../ui/src/components/player-components/tags/tags.tsx"],"sourcesContent":["import Image from \"next/image\";\r\nimport {useEffect, useState} from \"react\";\r\nimport { conditions } from \"helpers\";\r\nimport { ConditionName, ITagsProps } from \"interfaces\";\r\nimport { handleClickPlayerCardTag, handleScrollLeft, handleScrollRight } from \"redux-share/actions/tags.actions\";\r\nimport IMAGES from \"../../../../../images/importImages\";\r\n\r\nconst Tags = ({ tags, usePlace, tagId }: ITagsProps) => {\r\n\r\n    const [isHover, setIsHover] = useState<boolean>(false);\r\n    const [isScrollable, setIsScrollable] = useState<boolean>(true);\r\n\r\n    useEffect(() => {\r\n        if (document.getElementById(tagId) && conditions(ConditionName.isComplexDesktop)) handleScroll();\r\n    }, [document.getElementById(tagId)])\r\n\r\n    const handleScroll = () => setIsScrollable(!!document.getElementById(tagId) && Math.abs(Math.abs(document.getElementById(tagId)!.scrollWidth) - (document.getElementById(tagId)!.getBoundingClientRect().width + Math.abs(document.getElementById(tagId)!.scrollLeft))) <= 1)\r\n\r\n    return (\r\n        <div\r\n            className={`pl-relative pl-flex pl-items-center ${usePlace === \"DesktopDescription\" ? \"pl-my-2 pl-gap-4\" : \"pl-gap-1 no-scrollbar pl-overflow-auto\"}`}\r\n            onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}>\r\n            {\r\n                conditions(ConditionName.isComplexDesktop) && isHover && !isScrollable &&\r\n                <div className=\"pl-flex pl-absolute pl-left-0\" onClick={(event:any) => handleScrollLeft(event,tagId)} style={{\r\n                    width: 10, height: 10\r\n                }}>\r\n                    <Image\r\n                        src={conditions(ConditionName.isDarkMode) ? IMAGES.rightArrow : IMAGES.lightRightArrow}\r\n                        className={`pl-cursor-pointer pl-h-full pl-w-full`}\r\n                        layout={\"fill\"}\r\n                        alt=\"right-arrow\"\r\n                    />\r\n                </div>\r\n            }\r\n            <div\r\n                className={`pl-flex pl-w-full pl-items-center ${usePlace === \"DesktopDescription\" ? \"pl-gap-4\" : \"pl-gap-1\"} no-scrollbar pl-overflow-auto`}\r\n                id={tagId}>\r\n                {tags.split(\",\").map((tag: string, index: number) =>\r\n                    <p \r\n                        key={index} \r\n                        onClick={(event:any) => handleClickPlayerCardTag(event,tag)} \r\n                        style={{direction: \"ltr\"}}\r\n                        className={`pl-cursor-pointer ${usePlace === \"DesktopDescription\" ? \"pl-text-[14px] pl-text-primary-800 dark:pl-text-primary-500 pl-font-medium\" : \"pl-text-gray-800 dark:pl-text-dark-5 pl-bg-gray-100 dark:pl-bg-secondary-600 pl-px-2 pl-py-[3px] pl-rounded-[4px] pl-font-normal pl-min-w-max pl-text-[10px]\"}`}\r\n                    >\r\n                        {tag}{usePlace === \"DesktopDescription\" && \"#\"}\r\n                    </p>\r\n                )}\r\n            </div>\r\n            {\r\n                conditions(ConditionName.isComplexDesktop) && isHover && !isScrollable &&\r\n                <div className=\"pl-flex pl-absolute pl-right-0\" onClick={(event:any) => handleScrollRight(event,tagId)} style={{\r\n                    width: 10, height: 10\r\n                }}>\r\n                    <Image\r\n                        src={conditions(ConditionName.isDarkMode) ? IMAGES.leftArrow : IMAGES.lightLeftArrow}\r\n                        className={`pl-cursor-pointer pl-h-full pl-w-full`}\r\n                        layout={\"fill\"}\r\n                        alt=\"left-arrow\"\r\n                    />\r\n                </div>\r\n            }\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Tags;"],"mappings":"6MAAAA,IAAA,OAAOC,MAAW,aAClB,OAAQ,aAAAC,EAAW,YAAAC,MAAe,QA0Bd,cAAAC,EAYA,QAAAC,MAZA,oBApBpB,IAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,SAAAC,EAAU,MAAAC,CAAM,IAAkB,CAEpD,GAAM,CAACC,EAASC,CAAU,EAAIC,EAAkB,EAAK,EAC/C,CAACC,EAAcC,CAAe,EAAIF,EAAkB,EAAI,EAE9DG,EAAU,IAAM,CACR,SAAS,eAAeN,CAAK,GAAKO,oBAAyC,GAAGC,EAAa,CACnG,EAAG,CAAC,SAAS,eAAeR,CAAK,CAAC,CAAC,EAEnC,IAAMQ,EAAe,IAAMH,EAAgB,CAAC,CAAC,SAAS,eAAeL,CAAK,GAAK,KAAK,IAAI,KAAK,IAAI,SAAS,eAAeA,CAAK,EAAG,WAAW,GAAK,SAAS,eAAeA,CAAK,EAAG,sBAAsB,EAAE,MAAQ,KAAK,IAAI,SAAS,eAAeA,CAAK,EAAG,UAAU,EAAE,GAAK,CAAC,EAE5Q,OACIJ,EAAC,OACG,UAAW,uCAAuCG,IAAa,qBAAuB,mBAAqB,wCAAwC,GACnJ,WAAY,IAAMG,EAAW,EAAK,EAAG,YAAa,IAAMA,EAAW,EAAI,EAEnE,UAAAK,oBAAyC,GAAKN,GAAW,CAACG,GAC1DT,EAAC,OAAI,UAAU,gCAAgC,QAAUc,GAAcC,EAAiBD,EAAMT,CAAK,EAAG,MAAO,CACzG,MAAO,GAAI,OAAQ,EACvB,EACI,SAAAL,EAACgB,EAAA,CACG,IAAKJ,cAAmC,EAAIK,EAAO,WAAaA,EAAO,gBACvE,UAAW,wCACX,OAAQ,OACR,IAAI,cACR,EACJ,EAEJjB,EAAC,OACG,UAAW,qCAAqCI,IAAa,qBAAuB,WAAa,UAAU,iCAC3G,GAAIC,EACH,SAAAF,EAAK,MAAM,GAAG,EAAE,IAAI,CAACe,EAAaC,IAC/BlB,EAAC,KAEG,QAAUa,GAAcM,EAAyBN,EAAMI,CAAG,EAC1D,MAAO,CAAC,UAAW,KAAK,EACxB,UAAW,qBAAqBd,IAAa,qBAAuB,6EAA+E,8JAA8J,GAEhT,UAAAc,EAAKd,IAAa,sBAAwB,MALtCe,CAMT,CACJ,EACJ,EAEIP,oBAAyC,GAAKN,GAAW,CAACG,GAC1DT,EAAC,OAAI,UAAU,iCAAiC,QAAUc,GAAcO,EAAkBP,EAAMT,CAAK,EAAG,MAAO,CAC3G,MAAO,GAAI,OAAQ,EACvB,EACI,SAAAL,EAACgB,EAAA,CACG,IAAKJ,cAAmC,EAAIK,EAAO,UAAYA,EAAO,eACtE,UAAW,wCACX,OAAQ,OACR,IAAI,aACR,EACJ,GAER,CAER,EAEOK,EAAQpB","names":["init_esm_shims","Image","useEffect","useState","jsx","jsxs","Tags","tags","usePlace","tagId","isHover","setIsHover","useState","isScrollable","setIsScrollable","useEffect","conditions","handleScroll","event","handleScrollLeft","Image","importImages_default","tag","index","handleClickPlayerCardTag","handleScrollRight","tags_default"]}