{"version":3,"file":"static/chunks/8485.5826e70d5e2a13f1.js","mappings":"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","sources":["webpack://_N_E/./components/TourPage/PhotosHeader.tsx","webpack://_N_E/<anon>"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport Image from 'next/image';\nimport styled from 'styled-components';\nimport {\n  optimizeImageUrl,\n  optimizeVideoUrl\n} from '../../utils/videoLinkOptimize';\nimport { useMediaQuery } from '../../hooks/mediaQuery';\nimport { useRouter } from 'next/router';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport SwiperCore, { Navigation } from 'swiper';\nimport 'swiper/css';\nimport 'swiper/css/navigation';\nimport 'swiper/css/pagination';\nimport { type Swiper as SwiperType } from 'swiper';\nimport {\n  LeftSwipperArrows,\n  RightSwipperArrows\n} from '../../shared-components/SwipperArrows/SwipperArrows';\nSwiperCore.use([Navigation]);\n\nconst StyledVideo = styled.video``;\n\nconst NavigationButton = styled.div`\n  background: #e2e2e2;\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  transition: all 0.2s ease;\n`;\n\ninterface GalleryProps {\n  media: {\n    url: string;\n    alt: string;\n    name: string;\n  }[];\n  productName?: string;\n  productSlug?: string;\n  cardMessage?: string;\n}\nconst StyledSwiper = styled(Swiper)`\n  .swiper-pagination-bullet {\n    background-color: white;\n    opacity: 0.8;\n  }\n  .swiper-pagination-bullet-active {\n    background-color: #1f2c5b;\n    opacity: 1;\n  }\n`;\nconst PhotosHeader = ({\n  media,\n  productName,\n  productSlug,\n  cardMessage\n}: GalleryProps) => {\n  const mediaQuery = useMediaQuery(640);\n  const router = useRouter();\n  const handleShowAllClick = () => {\n    router.push(`/tours/tour-gallery?slug=${productSlug}`);\n  };\n  const handleImageClick = (index: number) => {\n    router.push(`/tours/tour-gallery?slug=${productSlug}&index=${index}`);\n  };\n  const [isHoveredShowAll, setIsHoveredShowAll] = useState(false);\n  const [isHoveredPhotos, setIsHoveredPhotos] = useState(false);\n  const handleMouseEnterShowAll = () => setIsHoveredShowAll(true);\n  const handleMouseLeaveShowAll = () => setIsHoveredShowAll(false);\n\n  const handleMouseEnterPhotos = () => setIsHoveredPhotos(true);\n  const handleMouseLeavePhotos = () => setIsHoveredPhotos(false);\n\n  const [isLastSlide, setIsLastSlide] = useState(false);\n  const [isFirstSlide, setIsFirstSlide] = useState(true);\n  const prevRef = useRef<HTMLDivElement>(null);\n  const nextRef = useRef<HTMLDivElement>(null);\n\n  const onBeforeInit = (Swiper: SwiperType): void => {\n    if (typeof Swiper.params.navigation !== 'boolean') {\n      const navigation = Swiper.params.navigation;\n      if (navigation) {\n        navigation.prevEl = prevRef.current;\n        navigation.nextEl = nextRef.current;\n      }\n    }\n  };\n\n  const handleSlideChange = (swiper: SwiperType) => {\n    setIsFirstSlide(swiper.isBeginning);\n    setIsLastSlide(swiper.isEnd);\n  };\n\n  return (\n    <>\n      <div className=\"relative hidden mmd:flex w-full mx-auto\">\n        {cardMessage && cardMessage === 'AWARD WINNER!' && (\n          <div className=\"absolute z-30 max-w-[300px] lg:max-w-[250px] py-2.5 px-2.5 md:top-2 md:left-2 xl:top-4 xl:left-4\">\n            <Image\n              src=\"/award-winner.png\"\n              width={100}\n              height={100}\n              quality={100}\n              alt=\"award-winner-logo\"\n              className=\"w-[70px] h-[76px] xl:w-[90px] xl:h-[106px]\"\n            />\n          </div>\n        )}\n\n        <div\n          onClick={handleShowAllClick}\n          className=\"absolute bottom-[-22px] right-0 flex justify-center items-center z-10\"\n        >\n          <button className=\"flex text-[#333] items-center gap-2 w-[296px] h-[50px] bg-white font-semibold rounded-full shadow-lg border border-gray-300 hover:shadow-xl transition\">\n            <div\n              onMouseEnter={handleMouseEnterPhotos}\n              onMouseLeave={handleMouseLeavePhotos}\n              className=\"flex w-[50%] justify-center border-r border-r-[#A3ABBA]\"\n            >\n              <Image\n                src={\n                  isHoveredPhotos\n                    ? '/hovered-photo-gallery.svg'\n                    : '/photo-gallery.svg'\n                }\n                width={24}\n                height={24}\n                alt=\"local\"\n                className=\"mr-2\"\n              />{' '}\n              <span\n                className={` ${\n                  isHoveredPhotos\n                    ? 'text-primary font-black underline'\n                    : 'text-[#333]'\n                }`}\n              >{`${media?.length} photos`}</span>\n            </div>\n            <div\n              onMouseEnter={handleMouseEnterShowAll}\n              onMouseLeave={handleMouseLeaveShowAll}\n              className=\"flex gap-2 w-[50%]\"\n            >\n              {' '}\n              <Image\n                src={isHoveredShowAll ? '/hoveredShowAll.svg' : '/showAll.svg'}\n                width={24}\n                height={24}\n                alt=\"show all icon\"\n              />{' '}\n              <span\n                className={` ${\n                  isHoveredShowAll\n                    ? 'text-primary font-black underline'\n                    : 'text-[#333]'\n                } `}\n              >\n                Show All\n              </span>{' '}\n            </div>\n          </button>\n        </div>\n        <div className=\"h-[420px] relative w-full\">\n          <div className=\"grid grid-cols-2 gap-2\">\n            <div\n              className=\"w-full h-[420px] cursor-pointer\"\n              onClick={() => handleImageClick(0)}\n            >\n              {media?.length > 0 &&\n                media[0] &&\n                (media[0].url.includes('jpg') ||\n                media[0].url.includes('png') ? (\n                  <Image\n                    src={optimizeImageUrl(media[0].url)}\n                    alt={media[0].alt || `${productName} image 1`}\n                    quality={60}\n                    fetchPriority=\"high\"\n                    width={600}\n                    height={420}\n                    loading=\"eager\"\n                    decoding=\"async\"\n                    className=\"h-[420px] object-cover w-full rounded-[8px]\"\n                    placeholder=\"blur\"\n                    blurDataURL=\"/placeholder.webp\"\n                    priority={true}\n                  />\n                ) : (\n                  <StyledVideo\n                    playsInline\n                    autoPlay={!mediaQuery}\n                    controls={mediaQuery}\n                    muted\n                    loop={!mediaQuery}\n                    className=\"h-[420px] w-full object-cover rounded-[8px]\"\n                    src={optimizeVideoUrl(media[0]?.url)}\n                    onClick={e => e.preventDefault()}\n                  />\n                ))}\n            </div>\n\n            <div className=\"w-full h-[420px] grid grid-cols-2 grid-rows-2 gap-2\">\n              {media?.slice(1, 5).map((mediaItem, index) => (\n                <div\n                  key={mediaItem.url}\n                  onClick={() => handleImageClick(index + 1)}\n                  className=\"cursor-pointer\"\n                >\n                  {mediaItem.url.includes('jpg') ||\n                  mediaItem.url.includes('png') ? (\n                    <Image\n                      src={optimizeImageUrl(mediaItem.url)}\n                      alt={mediaItem.alt || `${productName} image ${index + 2}`}\n                      quality={70}\n                      width={300}\n                      height={210}\n                      className=\"h-[206px] object-cover w-full rounded-[8px]\"\n                      placeholder=\"blur\"\n                      blurDataURL=\"/placeholder.webp\"\n                      priority={index === 0}\n                    />\n                  ) : (\n                    <StyledVideo\n                      playsInline\n                      autoPlay={!mediaQuery}\n                      controls={mediaQuery}\n                      muted\n                      loop={!mediaQuery}\n                      className=\"h-[206px] w-full object-cover rounded-[8px]\"\n                      src={optimizeVideoUrl(mediaItem.url)}\n                      onClick={e => e.preventDefault()}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"relative mmd:hidden w-full\">\n        <div className=\"h-[300px] w-full\">\n          <div className=\"absolute top-1/2 z-20 -translate-y-1/2 flex w-full justify-between px-2\">\n            <NavigationButton ref={prevRef}>\n              <LeftSwipperArrows isFirstSlide={isFirstSlide} />\n            </NavigationButton>\n            <NavigationButton ref={nextRef}>\n              <RightSwipperArrows isLastSlide={isLastSlide} />\n            </NavigationButton>\n          </div>\n          <StyledSwiper\n            spaceBetween={10}\n            slidesPerView=\"auto\"\n            pagination={{\n              clickable: true\n            }}\n            onSlideChange={handleSlideChange}\n            onBeforeInit={onBeforeInit}\n            navigation={{\n              prevEl: prevRef?.current,\n              nextEl: nextRef?.current\n            }}\n            breakpoints={{\n              320: { slidesPerView: 1 },\n              480: { slidesPerView: 2 },\n              640: { slidesPerView: 3 }\n            }}\n            className=\"h-full w-full\"\n          >\n            {media?.map((mediaItem, index) => (\n              <SwiperSlide key={mediaItem.url} className=\"h-full\">\n                {mediaItem.url.includes('jpg') ||\n                mediaItem.url.includes('png') ? (\n                  <Image\n                    src={optimizeImageUrl(mediaItem.url)}\n                    alt={mediaItem.alt || `${productName} image ${index + 1}`}\n                    quality={70}\n                    width={400}\n                    height={300}\n                    className=\"object-cover w-full h-full rounded-[8px]\"\n                    placeholder=\"blur\"\n                    blurDataURL=\"/placeholder.webp\"\n                    priority={index === 0}\n                  />\n                ) : (\n                  <StyledVideo\n                    playsInline\n                    autoPlay={!mediaQuery}\n                    controls={mediaQuery}\n                    muted\n                    loop={!mediaQuery}\n                    className=\"object-cover w-full h-full rounded-[8px]\"\n                    src={optimizeVideoUrl(mediaItem.url)}\n                    onClick={e => e.preventDefault()}\n                  />\n                )}\n              </SwiperSlide>\n            ))}\n          </StyledSwiper>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default PhotosHeader;\n"],"names":["SwiperCore","use","Navigation","StyledVideo","styled","video","withConfig","NavigationButton","div","StyledSwiper","Swiper","__webpack_exports__","media","productName","productSlug","cardMessage","param","mediaQuery","useMediaQuery","router","useRouter","handleImageClick","push","index","concat","isHoveredShowAll","setIsHoveredShowAll","useState","isHoveredPhotos","setIsHoveredPhotos","isLastSlide","setIsLastSlide","isFirstSlide","setIsFirstSlide","prevRef","useRef","nextRef","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","jsxs","Fragment","className","jsx","Image","src","width","height","quality","alt","onClick","button","onMouseEnter","onMouseLeave","span","length","url","includes","optimizeImageUrl","fetchPriority","loading","decoding","placeholder","blurDataURL","priority","playsInline","autoPlay","controls","muted","loop","optimizeVideoUrl","e","preventDefault","slice","map","mediaItem","ref","LeftSwipperArrows","RightSwipperArrows","spaceBetween","slidesPerView","pagination","clickable","onSlideChange","swiper","isBeginning","isEnd","onBeforeInit","params","navigation","prevEl","current","nextEl","breakpoints","SwiperSlide"],"sourceRoot":""}