<template>
	<div class="gallery-page page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section class="s1-Img-BG">
			<div
				class="parallax"
				:style="{
					background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
				}"
			>
				<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<!--    <section class="s2-BG">-->
		<!--      <div class="container">-->
		<!--        <div class="row">-->
		<!--          <div class="col-12">-->
		<!--            <ul>-->
		<!--              <nuxt-link-->
		<!--                  class="s2-all-cat"-->
		<!--                  :to="{name: 'lang-gallery',params: {lang: $route.params.lang},query: {category: 'all'}}"-->
		<!--                  tag="li"-->
		<!--              >-->
		<!--                <a :class="$route.query.category === 'all' ? 'active' : null">{{ content.s2.t1 }}</a>-->
		<!--              </nuxt-link>-->
		<!--              <nuxt-link-->
		<!--                  class="s2-all-cat"-->

		<!--                  :to="{name: 'lang-gallery',params: {lang: $route.params.lang},query: {category: 'no-category'}}"-->
		<!--                  tag="li"-->
		<!--              >-->
		<!--                <a :class="$route.query.category === 'no-category' ? 'active' : null">{{ content.s2.t2 }}</a>-->
		<!--              </nuxt-link>-->
		<!--              <nuxt-link-->
		<!--                  class="s2-all-cat"-->

		<!--                  v-for="item in galleryCategories"-->
		<!--                  :key="item._id"-->
		<!--                  :to="{name: 'lang-gallery',params: {lang: $route.params.lang},query: {category: item.locale[$route.params.lang].title}}"-->
		<!--                  tag="li"-->
		<!--              >-->
		<!--                <a :class="$route.query.category === item.locale[$route.params.lang].title ? 'active' : null">{{-->
		<!--                    item.locale[$route.params.lang].title-->
		<!--                  }}</a>-->
		<!--              </nuxt-link>-->
		<!--            </ul>-->
		<!--          </div>-->
		<!--        </div>-->
		<!--      </div>-->
		<!--    </section>-->

		<!---------------------------------- Section 3 ------------------------------------->
		<section class="s3-BG section">
			<div class="container">
				<template v-if="galleryCategories.length">
					<!-- start gallery row -->
					<!--          <div class="col-12 col-md-3" v-for="(item,index) in imageChunk" :key="index">-->
					<div class="row">
						<div class="col-12 col-md-3" v-for="item in galleryCategories" :key="item._id">
							<nuxt-link :to="{ name: 'lang-gallery-images', params: { lang: $route.params.lang, images: item._id } }">
								<div class="imgBox">
									<img
										:src="item.thumb.includes('undefined') ? '/img/default-img.png' : item.thumb"
										:alt="item.locale[$route.params.lang].title"
									/>
									<h4>{{ item.locale[$route.params.lang].title }}</h4>
								</div>
							</nuxt-link>
						</div>
						<!--            </div>-->

						<!--            <pre>{{ filteredImages }}</pre>-->
					</div>
					<!--          <div class="gallery&#45;&#45;row" v-for="(item,index) in imageChunk" :key="index"-->
					<!--               :class="index%2 !== 0 ? 'gallery&#45;&#45;row-reverse' : null"-->

					<!--          >-->
					<!--            <div class="row top">-->
					<!--              <div class="col-5 left anim-fadeIn">-->
					<!--                <div class="imgBox" v-if="item.length >= 1">-->
					<!--                  <a :href="item[0].image">-->
					<!--                    <img :src="item[0].thumb" :title="item[0].locale[$route.params.lang].caption"-->
					<!--                         :alt="item[0].locale[$route.params.lang].caption">-->
					<!--                  </a>-->
					<!--                </div>-->
					<!--&lt;!&ndash;                <div class="txtBox anim-fadeIn" v-if="item.length >= 3">&ndash;&gt;-->
					<!--&lt;!&ndash;                  <img src="/img/GalleryPage/logo-colored.svg" alt=""/>&ndash;&gt;-->
					<!--&lt;!&ndash;                  <p>&ndash;&gt;-->
					<!--&lt;!&ndash;                    {{ content.s3.t1 }}&ndash;&gt;-->
					<!--&lt;!&ndash;                  </p>&ndash;&gt;-->
					<!--&lt;!&ndash;                </div>&ndash;&gt;-->
					<!--              </div>-->
					<!--              <div class="col-7 right anim-fadeIn">-->
					<!--                <div class="imgBox" v-if="item.length >= 2">-->
					<!--                  <a :href="item[1].image">-->
					<!--                    <img :src="item[1].thumb" :title="item[1].locale[$route.params.lang].caption"-->
					<!--                         :alt="item[1].locale[$route.params.lang].caption">-->
					<!--                  </a>-->
					<!--                </div>-->
					<!--                <div class="imgBox" v-if="item.length >= 3">-->
					<!--                  <a :href="item[2].image">-->
					<!--                    <img :src="item[2].thumb" :title="item[2].locale[$route.params.lang].caption"-->
					<!--                         :alt="item[2].locale[$route.params.lang].caption">-->
					<!--                  </a>-->
					<!--                </div>-->
					<!--              </div>-->
					<!--            </div>-->
					<!--            <div class="row bottom" v-if="item.length >= 4">-->
					<!--              <div class="col-8 anim-fadeIn">-->
					<!--                <div class="imgBox" v-if="item.length >= 4">-->
					<!--                  <a :href="item[3].image">-->
					<!--                    <img :src="item[3].thumb" :title="item[3].locale[$route.params.lang].caption"-->
					<!--                         :alt="item[3].locale[$route.params.lang].caption">-->
					<!--                  </a>-->
					<!--                </div>-->
					<!--              </div>-->
					<!--              <div class="col-4 anim-fadeIn">-->
					<!--                <div class="imgBox" v-if="item.length >= 5">-->
					<!--                  <a :href="item[4].image">-->
					<!--                    <img :src="item[4].thumb" :title="item[4].locale[$route.params.lang].caption"-->
					<!--                         :alt="item[4].locale[$route.params.lang].caption">-->
					<!--                  </a>-->
					<!--                </div>-->
					<!--              </div>-->
					<!--            </div>-->
					<!--          </div>-->
					<!-- end gallery row -->
				</template>

				<div class="row" v-else>
					<div class="col-12 s3-notFound">
						<h6 class="h6 notFound">{{ content.s3.t2 }}</h6>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import {
		fadeInAnimation,
		fadeInStaggerAnimation,
		leftToRightAnimation,
		leftToRightStaggerAnimation,
		numberAnimation,
		progressAnimation,
		rightToLeftAnimation
	} from '@/utils/animations'

	export default {
		mounted() {
			this.$nextTick(() => {
				fadeInAnimation(this.$gsap)
				leftToRightAnimation(this.$gsap)
				fadeInStaggerAnimation(this.$gsap)
				leftToRightStaggerAnimation(this.$gsap)
				numberAnimation(this.$gsap)
				progressAnimation(this.$gsap)
				rightToLeftAnimation(this.$gsap)
			})
			//--------------------------------------------------------- Section 1
			// this.$gsap.timeline({
			//   scrollTrigger: {
			//     trigger: ".s2-BG",
			//     scrub: true,
			//     start: "top top",
			//   }
			// })
			//     .to($('.s1-Img-BG .parallax'), {
			//       duration: 9,
			//       opacity: 0,
			//       y: '50%'
			//     })
		},
		data() {
			return {
				galleryCategories: null,
				images: null,
				defaultCover: '/img/GalleryPage/page-title.png'
			}
		},
		computed: {
			filteredImages() {
				if (this.$route.query.category === 'all') return this.images
				else if (this.$route.query.category === 'no-category') return this.images.filter(item => item.noCategory)
				else
					return this.images.filter(
						item =>
							!item.noCategory && item.category.locale[this.$route.params.lang].title === this.$route.query.category
					)
			},
			imageChunk() {
				const images = this.filteredImages
				const chunkSize = 5
				let imageChunk = []
				let chunk = []
				images.forEach((item, index) => {
					chunk.push(item)
					if ((index + 1) % chunkSize === 0) {
						imageChunk.push(chunk)
						chunk = []
					}
					if (index === images.length - 1 && chunk.length) imageChunk.push(chunk)
				})
				return imageChunk
			},
			content() {
				return this.$store.state.content.gallery[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.gallery
			}
		},
		async asyncData({ $axios }) {
			const galleryCategories = await $axios.get(`/api/public/galleryCategories`)
			return {
				galleryCategories: galleryCategories.data
			}
		}
	}
</script>
