import type { servicesSchema } from '@/content.config'
import type { z } from 'astro:content'
import { useCallback, useRef, useState } from 'react'
import { type SwiperRef, SwiperSlide } from 'swiper/react'
import { CharachteristicCard } from './CharachteristicCard'
import { cn } from '@/libs/cn'
import { SimpleSwiper } from '../swiper/SimpleSwiper'
import React from 'react'

export type ServicesProps = {
  services: z.infer<typeof servicesSchema>[]
}

export const Services: React.FC<ServicesProps> = ({ services }) => {
  const swiperRef = useRef<SwiperRef | null>(null)
  const tagSwiper = useRef<SwiperRef | null>(null)
  const [serviceId, setServiceId] = useState(0)
  const selectedService = services[serviceId]
  const isSelected = (index: number) => index === serviceId
  const updateServiceHandler = useCallback((index: number) => {
    setServiceId(index)
    swiperRef.current?.swiper.slideTo(0)
    tagSwiper.current?.swiper.slideTo(index)
  }, [])

  return (
    <div className="flex flex-col gap-5">
      <SimpleSwiper spaceBetween={8} ref={tagSwiper}>
        {services.map((service, index) => (
          <SwiperSlide style={{ width: 'auto' }} key={index}>
            <button
              className={cn('tag-btn', isSelected(index) && 'tag-btn-active')}
              onClick={() => updateServiceHandler(index)}
            >
              {service.title}
            </button>
          </SwiperSlide>
        ))}
      </SimpleSwiper>
      <SimpleSwiper ref={swiperRef}>
        {selectedService.charachteristics?.map((charachteristic, index) => (
          <SwiperSlide
            className="aspect-3/4 !h-auto w-full max-w-[280px] md:max-w-[320px]"
            key={index}
          >
            <CharachteristicCard
              {...charachteristic}
              link={charachteristic.link || selectedService.link}
            />
          </SwiperSlide>
        ))}
      </SimpleSwiper>
    </div>
  )
}