import Seo from '@/core/components/Seo'
import Pagination from '@/core/components/elements/Pagination/Pagination'
import Spinner from '@/core/components/elements/Spinner/Spinner'
import BasicLayout from '@/core/components/layouts/BasicLayout'
import useVideo from '@/lib/video/hooks/useVideo'
import { useRouter } from 'next/router'
import { LazyLoadComponent } from 'react-lazy-load-image-component'

export default function Video() {
  const router = useRouter()
  const limit = 16

  const { page = 1 } = router.query
  const { video } = useVideo({ limit, offset: limit * (page - 1) })

  const pageCount = Math.ceil(video?.data?.videoTotal / limit)

  return (
    <BasicLayout>
      <Seo title='Kanal Video Indoteknik.com' />

      {video.isLoading && (
        <div className='flex justify-center my-6'>
          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
        </div>
      )}

      {video.isFetched && (
        <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
          <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kanal Video Indoteknik</h1>
          <div className='grid grid-cols-1 md:grid-cols-4 gap-6'>
            {video.data?.videos?.map((video) => (
              <div className='shadow bg-white rounded' key={video.id}>
                <LazyLoadComponent>
                  <iframe
                    src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)?.[1] || ''}`}
                    title='YouTube video player'
                    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
                    allowFullScreen={true}
                    width='100%'
                    height={200}
                    className='rounded'
                  />
                </LazyLoadComponent>
                <div className='p-3'>
                  <a
                    href='https://www.youtube.com/@indoteknikcom'
                    className='text-danger-500 mb-2 block'
                  >
                    {video.channelName}
                  </a>
                  <a href={video.url} className='font-medium leading-6'>
                    {video.name}
                  </a>
                </div>
              </div>
            ))}
          </div>

          <Pagination
            currentPage={parseInt(page)}
            pageCount={pageCount}
            url={`/video`}
            className='mt-4 md:mt-10'
          />
        </div>
      )}
    </BasicLayout>
  )
}