"use client";
import { ComponentPhtotOne, Maybe } from "@/types/gpl/graphql";
import styles from "./index.module.scss";
import Image from "@/modules/common/components/image";
import Button from "@/modules/common/components/button/border";
interface Props {
  param: Maybe<ComponentPhtotOne> | undefined;
}
import {
  Thumbs,
} from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { useState, useRef} from "react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import type {Swiper as SwiperType} from 'swiper';
export default function PhotoOne({ param }: Props) {
  
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType|null>(null);
  return (
    <div className={styles.content}>
      <div className={styles.thumb}>
        <div className={styles.prev} onClick={() => thumbsSwiper?.slidePrev()}>
          <svg width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M26 14L14 2L2 14" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div className={styles.next} onClick={() => thumbsSwiper?.slideNext()}>
          <svg width="28" height="16" viewBox="0 0 28 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2 2L14 14L26 2" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <Swiper
          direction={'vertical'}
          onSwiper={setThumbsSwiper}
          spaceBetween={10}
          slidesPerView={3}
          watchSlidesProgress={true}
          modules={[Thumbs]}
          className={styles.mySwiper}
        >
          {
            param?.imgs?.map((item ,index) => (
                <SwiperSlide key={index}>
                    <img src={item?.url} />
                </SwiperSlide>
            ))
          }
        </Swiper>
      </div>
      <div className={styles.main}>
        <Swiper
         direction={'vertical'}
          modules={[Thumbs]}
          spaceBetween={50}
          slidesPerView={1}
          thumbs={{ swiper: thumbsSwiper }}
          pagination={{ clickable: true }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log("slide change")}
          className={styles.mySwiperMain}
        >
          {
            param?.imgs?.map((item ,index) => (
                <SwiperSlide key={index}>
                    <img src={item?.url} />
                </SwiperSlide>
            ))
          }
        </Swiper>
      </div>
    </div>
  );
}

.content {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 80px 0;

  @include md {
    gap: 20px;
  }

  .thumb {
    height: 280px;
    flex-shrink: 0;
    position: relative;

    @include sm {
      height: 400px;
    }

    .prev {
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      cursor: pointer;
    }

    .next {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      cursor: pointer;
    }

    .mySwiper {
      height: 100%;

      :global(.swiper-slide) {
        aspect-ratio: 1;
        border: 1px solid #727171;
        width: 18vw;
        max-width: 100px;

        @include sm {
          width: 120px;
          max-width: 200px;
        }
      }

      :global(.swiper-button-next) {
        color: #fff;
      }

      :global(.swiper-button-prev) {
        color: #fff;
      }
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .mySwiperMain {
      height: 250px;
      width: 250px;

      @include sm {
        height: 300px;
        width: 300px;
      }

      :global(.swiper-slide) {
        aspect-ratio: 1;
      }
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      aspect-ratio: 4/5;
    }
  }
}