{"version":3,"mappings":"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","names":["ComputerIcon","EmptySection","lazy","ScreenshotSection","screenshots","solutionOwner","current_user","is_claimed","isRmcAdmin","openImageModal","setOpenImageModal","useState","openedImage","setOpenedImage","imageDescription","setImageDescription","tracking","useTracking","openScreenshotModal","file","image_url","description","trackEvent","event_name","page_url","window","location","pathname","event_loggable_type","additional_attributes","content_type","split","event_type","file_name","imagename","media_type","conditionsForEmptyScreenshotsSection","id","every","obj","className","children","_jsx","src","_jsxs","heading","paragraph","map","screenshot","index","alt","onClick","trim","includes","Modal","isOpen","onClose","showCloseButton","closeStyle","EditScreenshotSection","setData","data","editableScreenshotIndex","setEditableScreenshotIndex","activeIndex","setActiveIndex","openModal","setOpenModal","setSrc","fileInputRefs","useRef","imageWidth","useMobileDetect","screenSize","MOBILE_SCREEN_SIZE","showValidationErrors","errors","length","toast","error","position","autoClose","hideProgressBar","closeOnClick","bodyClassName","handleDocumentImageChange","screenshotImage","newImageName","name","prevData","updatedScreenshots","screenshots_attributes","image","handleTitleChange","screenshot_description","handleEditableClick","_destroy","handleDelete","screenshotId","handleButtonClick","current","click","handleScreenshotImage","validationErrors","imageValidation","EditIcon","type","style","display","accept","ref","el","onChange","e","target","files","PlusIcon","Input","label","labelHtmlFor","value","containerClass","maxLength","SCREENSHOT_DESC_LENGTH","document","title","Button","variant","size","CropModal","handleFileChange","maxImageSize","MAX_FILE_SIZE_BYTES"],"sources":["../../../app/assets/images/computer-desktop.svg","../../../app/javascript/components/atoms/OfficialMediaSection/ScreenshotSection.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='25'%20height='25'%20viewBox='0%200%2025%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.90039%206.03594C2.90039%204.54477%204.10922%203.33594%205.60039%203.33594H19.4004C20.8916%203.33594%2022.1004%204.54477%2022.1004%206.03594V16.2359C22.1004%2017.7271%2020.8916%2018.9359%2019.4004%2018.9359H15.6742C15.9104%2019.7302%2016.3755%2020.426%2016.9942%2020.948C17.2831%2021.1917%2017.389%2021.5899%2017.2593%2021.9449C17.1295%2022.2998%2016.7919%2022.5359%2016.4139%2022.5359H8.58696C8.20903%2022.5359%207.87136%2022.2998%207.74164%2021.9449C7.61192%2021.5899%207.71778%2021.1917%208.00665%2020.948C8.62542%2020.426%209.09045%2019.7302%209.32669%2018.9359H5.60039C4.10922%2018.9359%202.90039%2017.7271%202.90039%2016.2359V6.03594ZM4.70039%206.03594C4.70039%205.53888%205.10333%205.13594%205.60039%205.13594H19.4004C19.8974%205.13594%2020.3004%205.53888%2020.3004%206.03594V15.0359C20.3004%2015.533%2019.8974%2015.9359%2019.4004%2015.9359H5.60039C5.10333%2015.9359%204.70039%2015.533%204.70039%2015.0359V6.03594Z'%20fill='%238A8DA0'/%3e%3c/svg%3e\"","import { lazy, useRef, useState } from \"react\"\nimport ComputerIcon from \".././../../../assets/images/computer-desktop.svg\"\nimport Button from \"../buttons/Button\"\nimport Input from '@/components/atoms/inputs/Input'\nimport PlusIcon from \"../../../../assets/images/plus.svg\"\nimport EditIcon from \"../../../../assets/images/edit-pencil-no-bg.svg\"\nimport Modal from \"../modals/Modal\"\nimport { imageValidation } from \"@/utils/fileValidations\"\nimport { toast } from \"react-toastify\"\nimport { useTracking } from 'react-tracking'\nimport CropModal from \"@/components/molecules/modals/CropModal\"\nimport { MAX_FILE_SIZE_BYTES } from '@/utils/fileMaxSizes'\nimport { useMobileDetect } from \"@/utils/detectMobile\"\nimport { MOBILE_SCREEN_SIZE, SCREENSHOT_DESC_LENGTH } from \"@/utils/constants\"\n\nconst EmptySection = lazy(() => import('../../atoms/widgets/EmptySection'))\n\ntype ScreenshotsSectionProps = {\n  solution?: schema.Solution\n  screenshots: schema.Screenshot[]\n  handleSubmit?: (e: React.FormEvent) => Promise<void>\n  setData: any\n  solutionOwner?: schema.User\n  current_user?: schema.User\n  is_claimed: boolean\n  isRmcAdmin: boolean\n}\n\nexport const ScreenshotSection = ({ screenshots, solutionOwner, current_user, is_claimed, isRmcAdmin }: ScreenshotsSectionProps) => {\n  const [openImageModal, setOpenImageModal] = useState(false)\n  const [openedImage, setOpenedImage] = useState('')\n  const [imageDescription, setImageDescription] = useState('')\n  const tracking = useTracking()\n\n  const openScreenshotModal = (file) => {\n    setOpenImageModal(true)\n    setOpenedImage(file.image_url)\n    setImageDescription(file.description)\n    tracking.trackEvent({\n      event_name: 'Offical Media Section',\n      page_url: window.location.pathname,\n      event_loggable_type: \"RmcEvents::MediaLog\",\n      additional_attributes: {\n        content_type: file.content_type.split('/')[1],\n        event_type: 'click',\n        file_name: file.imagename,\n        media_type: 'image'\n      }\n    })\n  }\n\n  const conditionsForEmptyScreenshotsSection = () => {\n    return ((is_claimed || isRmcAdmin) && current_user && (current_user?.id === solutionOwner?.id || isRmcAdmin) && screenshots?.every(obj => obj.id === null))\n  }\n  return (\n    <div className={!screenshots?.every(obj => obj.id === null) || conditionsForEmptyScreenshotsSection() ? \"sm:p-8 p-4\" : \"\"}>\n      {\n        (!screenshots?.every(obj => obj.id === null) || conditionsForEmptyScreenshotsSection()) ?\n          <div className=\"flex\">\n            <img src={ComputerIcon} />\n            <p className=\"text-base font-semibold mx-2\">Screenshots</p>\n          </div>\n          :\n          null\n      }\n      <div>\n        <div>\n          {conditionsForEmptyScreenshotsSection() ?\n            <div className=\"\">\n              <div className=\"sm:mt-3 mt-4\">\n                <EmptySection heading=\"No Screenshots Yet\" paragraph=\"Click the pencil icon to add a screenshot to your profile.\" />\n              </div>\n            </div>\n            :\n            <div>\n              <div className=\"grid lg:grid-cols-3 md:grid-cols-2 cols-1 lg:gap-3 md:gap-2\">\n                {screenshots.map((screenshot, index) => (\n                  screenshot.id !== null &&\n                  <div className=\"sm:mt-5 mt-4\" key={index}>\n                    <img src={screenshot.image_url} alt=\"Screenshot Image\" className=\"border-[1.5px] xl:w-[368px] xl:h-[204px] w-[100%] h-[204px] rounded-xl cursor-pointer\" onClick={() => openScreenshotModal(screenshot)} />\n                    <div className=\"flex justify-between pt-4\">\n                      <p\n                        className={`sm:text-md text-sm ${\n                          screenshot.description.trim().includes(' ')\n                            ? 'break-words'\n                            : 'break-all'\n                        }`}\n                      >\n                        {screenshot.description.trim()}\n                      </p>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          }\n        </div>\n        <Modal\n          isOpen={openImageModal}\n          onClose={() => setOpenImageModal(false)}\n          showCloseButton={false}\n          closeStyle=\"top-10 right-10\"\n          className=\"bg-slate-100 rounded-xl\"\n        >\n          <img className=\"rounded-t-xl w-[320px] h-[175px] sm:w-[600px] sm:h-[345px] md:w-[800px] md:h-[450px]\" src={openedImage} alt=\"Screenshot\" />\n          <p className=\"sm:py-4 py-2 sm:pl-4 pl-2 sm:text-md text-sm\"><strong>Description:</strong> {imageDescription}</p>\n        </Modal>\n      </div>\n    </div>\n  )\n}\n\nexport const EditScreenshotSection = ({ setData, data }) => {\n  const [editableScreenshotIndex, setEditableScreenshotIndex] = useState(null)\n  const [activeIndex, setActiveIndex] = useState(null)\n  const [openModal, setOpenModal] = useState(false)\n  const [src, setSrc] = useState('')\n  const fileInputRefs = useRef([])\n  const isMobile = useMobileDetect({ screenSize: MOBILE_SCREEN_SIZE })\n  const imageWidth = isMobile ? 300 : 700\n  const showValidationErrors = (errors) => {\n    if (errors.length > 0) {\n      toast(\n        <div>\n          {errors.map((error) => {\n            return <p>{error}</p>\n          })}\n        </div>,\n        {\n          position: 'top-right',\n          autoClose: 5000,\n          hideProgressBar: true,\n          closeOnClick: true,\n          className:\n            'bg-red-200 text-md text-black p-4 md:p-6 md:rounded-xl md:w-[400px] md:right-[80px]',\n          bodyClassName: 'p-0 min-w-[324px]',\n        }\n      )\n      setOpenModal(false)\n      return\n    }\n  }\n\n  const handleDocumentImageChange = (screenshotImage) => {\n    const newImageName = screenshotImage !== null ? screenshotImage.name : \"\"\n    setData((prevData) => {\n      const updatedScreenshots = prevData.screenshots_attributes.map(\n        (screenshot, position) => {\n          if (position === activeIndex) {\n            return { ...screenshot, image: screenshotImage, imagename: newImageName, image_url: null }\n          }\n          return screenshot\n        }\n      )\n      return { ...prevData, screenshots_attributes: updatedScreenshots }\n    })\n    setOpenModal(false)\n  }\n\n  const handleTitleChange = (screenshot_description, index) => {\n    setData((prevData) => {\n      const updatedScreenshots = prevData.screenshots_attributes.map(\n        (screenshot, position) => {\n          if (position === index) {\n            return { ...screenshot, description: screenshot_description }\n          }\n          return screenshot\n        }\n      )\n      return { ...prevData, screenshots_attributes: updatedScreenshots }\n    })\n  }\n\n  const handleEditableClick = (index: number) => {\n    setEditableScreenshotIndex(index)\n    setData((prevData) => {\n      const updatedScreenshots = prevData.screenshots_attributes.map(\n        (screenshot, position) => {\n          if (position === index) {\n            return { ...screenshot, description: \"\", imagename: \"\", image: null, _destroy: false, }\n          }\n          return screenshot\n        }\n      )\n      return { ...prevData, screenshots_attributes: updatedScreenshots }\n    })\n  }\n\n  const handleDelete = (screenshotId) => {\n    setData((prevData) => {\n      const updatedScreenshots = prevData.screenshots_attributes.map((screenshot) => {\n        if (screenshot.id === screenshotId) {\n          return { ...screenshot, _destroy: true }\n        }\n        return screenshot\n      })\n      return { ...prevData, screenshots_attributes: updatedScreenshots }\n    })\n  }\n\n  const handleButtonClick = (index) => {\n    setActiveIndex(index)\n    fileInputRefs.current[index]?.click()\n  }\n  const handleScreenshotImage = (screenshot) => {\n    let validationErrors = null\n    if (screenshot !== null) {\n      validationErrors = imageValidation(screenshot)\n      if (validationErrors.length > 0) {\n        showValidationErrors(validationErrors)\n        return\n      }\n    }\n    setSrc(screenshot)\n    setOpenModal(true)\n  }\n\n  return (\n    <div className=\"sm:p-8 p-4\">\n      <div className=\"flex\">\n        <img src={ComputerIcon} alt=\"ComputerIcon\" />\n        <p className=\"text-base font-semibold mx-2\">Screenshots</p>\n      </div>\n      <div className=\"grid lg:grid-cols-3 md:grid-cols-2 cols-1 lg:gap-3 md:gap-2 pt-5\">\n        {data.screenshots_attributes.map((screenshot, index) => (\n          (screenshot.id !== null || editableScreenshotIndex === index || screenshot.description !== '') && !screenshot._destroy ?\n            <div className=\"rounded-xl relative\" key={index}>\n              {\n                screenshot.imagename !== \"\" && screenshot.image_url !== null ?\n                  <div>\n                    <div className=\"absolute top-[155px] right-2 flex items-center justify-center bg-white rounded-full w-10 h-10 hover:cursor-pointer\">\n                      <img src={EditIcon} alt=\"edit icon\" className=\"w-6 h-6\"\n                        onClick={() => {\n                          handleButtonClick(index)\n                        }}\n                      />\n                      <input\n                        type='file'\n                        id={`fileInput_${index}`}\n                        style={{ display: 'none' }}\n                        accept='.jpg,.png,.jpeg'\n                        ref={(el) => (fileInputRefs.current[index] = el)}\n                        onChange={(e) =>\n                          handleScreenshotImage(e.target.files[0])\n                        }\n                      />\n                    </div>\n                    <img src={screenshot.image_url} alt=\"download-thumbnail\" className=\"xl:w-[368px] xl:h-[204px] w-[100%] h-[204px] rounded-xl\" />\n                  </div>\n                  :\n                  <div className=\"xl:w-[368px] xl:h-[204px] w-[100%] h-[204px] rounded-xl bg-gray-100 border-spacing-y-4 border-[1px] sm:mt-0 mt-5\">\n                    <div className=\"flex flex-col items-center justify-center h-full\">\n                      <div className=\"w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:cursor-pointer\">\n                        {screenshot.imagename === \"\" ?\n                          <img src={PlusIcon} id={screenshot.id}\n                            alt=\"plus icon\"\n                            onClick={() => {\n                              handleButtonClick(index)\n                            }}\n                          />\n                          :\n                          <img src={EditIcon} id={screenshot.id}\n                            alt=\"edit icon\"\n                            onClick={() => {\n                              handleButtonClick(index)\n                            }}\n                          />\n                        }\n                      </div>\n                      {screenshot.imagename === \"\" ?\n                        <h2 className=\"text-[#222427] text-muted mt-2\">Add New</h2> :\n                        <h2 className=\"text-[#222427] text-muted mt-2\">{screenshot.image.name}</h2>\n                      }\n                      <input\n                        type='file'\n                        id={`fileInput_${index}`}\n                        style={{ display: 'none' }}\n                        accept='.jpg,.png,.jpeg'\n                        ref={(el) => (fileInputRefs.current[index] = el)}\n                        onChange={(e) =>\n                          handleScreenshotImage(e.target.files[0])\n                        }\n                      />\n                    </div>\n                  </div>\n              }\n\n              <Input\n                type=\"text\"\n                label=\"Image Description:\"\n                labelHtmlFor={`screenshot_description_${index}`}\n                id={`screenshot_description_${index}`}\n                name={`screenshot_description_${index}`}\n                value={screenshot.description}\n                containerClass=\"my-7\"\n                onChange={(e) =>\n                  handleTitleChange(e.target.value, index)\n                }\n                maxLength={SCREENSHOT_DESC_LENGTH}\n                className={ document.title == \"\" ? \"focus:border-red-700 border-red-700\": \"\"}\n              />\n              <div className=\"flex\">\n                <div\n                  className={`text-xs font-medium ${screenshot.description?.length >= SCREENSHOT_DESC_LENGTH\n                    ? 'text-danger-red'\n                    : 'text-[#8A8DA0]'\n                    }`}\n                >\n                  Max {SCREENSHOT_DESC_LENGTH} characters\n                </div>\n                <div\n                  className={`ml-auto text-xs font-medium ${screenshot.description?.length >= SCREENSHOT_DESC_LENGTH\n                    ? 'text-danger-red'\n                    : 'text-[#8A8DA0]'\n                    }`}\n                >\n                  {screenshot.description?.length}\n                </div>\n              </div>\n              {screenshot.id != null &&\n                <Button variant='dangerLight' size='md' className='my-[1.5rem]' onClick={() => handleDelete(screenshot.id)}>\n                  Delete Item\n                </Button>\n              }\n            </div>\n            :\n            <div className=\"xl:w-[368px] xl:h-[204px] w-[100%] h-[204px] rounded-xl border-dashed border-[#8A8DA0] border-spacing-y-4 border-[1px] sm:mt-0 mt-5\">\n              <div className=\"flex flex-col items-center justify-center h-full\">\n                <div className=\"w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:cursor-pointer\">\n                  <img src={PlusIcon} alt='plus icon' onClick={() => handleEditableClick(index)} id={screenshot.id} />\n                </div>\n                <h1 className='pt-2'>Add New</h1>\n              </div>\n            </div>\n        ))}\n      </div>\n      <CropModal\n        openModal={openModal}\n        setOpenModal={setOpenModal}\n        src={src}\n        handleFileChange={handleDocumentImageChange}\n        maxImageSize={MAX_FILE_SIZE_BYTES}\n        imageWidth={imageWidth}\n      />\n    </div>\n  )\n}\n"],"file":"assets/ScreenshotSection-OYPgcpSW.js"}