import useBrand from '../hooks/useBrand'
import Image from 'next/image'

import { Swiper, SwiperSlide } from 'swiper/react'
import { Pagination, Autoplay } from 'swiper'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/autoplay'
import Divider from '@/core/components/elements/Divider/Divider'
import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'

const swiperBanner = {
  pagination: { dynamicBullets: true },
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  modules: [Pagination, Autoplay]
}

const Brand = ({ id }) => {
  const { brand } = useBrand({ id })

  return (
    <>
      <MobileView>
        <>
          <div>
            {brand.isLoading && <ImageSkeleton />}
            {brand.data?.banners?.length == 0 && (
              <Image
                src='/images/default-banner-brand.jpg'
                alt='Brand - Indoteknik'
                width={1024}
                height={512}
                className='w-full h-auto'
              />
            )}
            {brand.data && (
              <>
                <Swiper
                  slidesPerView={1}
                  pagination={swiperBanner.pagination}
                  modules={swiperBanner.modules}
                  autoplay={swiperBanner.autoplay}
                  className='border-b border-gray_r-6'
                >
                  {brand.data?.banners?.map((banner, index) => (
                    <SwiperSlide key={index}>
                      <Image
                        src={banner}
                        alt={`Brand ${brand.data?.name} - Indoteknik`}
                        width={1024}
                        height={512}
                        className='w-full h-auto'
                      />
                    </SwiperSlide>
                  ))}
                </Swiper>
                <div className='p-4'>
                  <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div>
                  {brand?.data?.logo && (
                    <Image
                      src={brand?.data?.logo}
                      alt={brand?.data?.name}
                      className='w-32 p-2 border borde-gray_r-6 rounded'
                      width={256}
                      height={128}
                    />
                  )}
                  {!brand?.data?.logo && (
                    <div className='bg-danger-500 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
                      {brand?.data?.name}
                    </div>
                  )}
                </div>
              </>
            )}
          </div>
          <Divider />
        </>
      </MobileView>

      <DesktopView>
        <div className='container mx-auto mt-10 mb-3'>
          <div className='min-h-[150px]'>
            {brand.isLoading && <ImageSkeleton />}
            {brand.data?.banners?.length == 0 && (
              <Image
                src='/images/default-banner-brand.jpg'
                alt='Brand - Indoteknik'
                width={1024}
                height={512}
                className='w-full h-auto'
              />
            )}
            {brand.data && (
              <>
                <Swiper
                  slidesPerView={1}
                  pagination={swiperBanner.pagination}
                  modules={swiperBanner.modules}
                  autoplay={swiperBanner.autoplay}
                  className='border-b border-gray_r-6'
                >
                  {brand.data?.banners?.map((banner, index) => (
                    <SwiperSlide key={index}>
                      <Image
                        src={banner}
                        alt={`Brand ${brand.data?.name} - Indoteknik`}
                        width={1024}
                        height={512}
                        className='w-full h-auto'
                      />
                    </SwiperSlide>
                  ))}
                </Swiper>
                <div className='p-4'>
                  <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div>
                  {brand?.data?.logo && (
                    <Image
                      src={brand?.data?.logo}
                      alt={brand?.data?.name}
                      className='w-32 p-2 border borde-gray_r-6 rounded'
                      width={1024}
                      height={512}
                    />
                  )}
                  {!brand?.data?.logo && (
                    <div className='bg-danger-500 text-white text-center text-body-1 py-2 px-4 rounded w-fit'>
                      {brand?.data?.name}
                    </div>
                  )}
                </div>
              </>
            )}
          </div>
          <Divider />
        </div>
      </DesktopView>
    </>
  )
}

export default Brand