"use client"
import { Empty } from '@/components/common/Empty'
import { IconPlayVideo } from '@/components/icon/IconPlayVideo'
import { useLazyPracListGetDataByIdQuery } from '@/services/PracList'
import { PracVideoDataResponse } from '@/services/PracVideo'
import { usePreviewvideosCreateMutation } from '@/services/previewvideos'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import React, { useEffect } from 'react'
import ReactPlayer from 'react-player'
export const ListVideo = ({ id, videoId }: { id: string, videoId: string }) => {
    const router = useRouter()
    const [PracListGetDataById, { currentData: DataPracListGetDataById, isFetching }] = useLazyPracListGetDataByIdQuery()
    const [PreviewvideosCreate, { isLoading: isLoadingPreviewvideosCreate }] = usePreviewvideosCreateMutation()
    const session = useSession()
    useEffect(() => {
        if (id) {
            PracListGetDataById({ id: String(id) })
        }
    }, [id])

    if (isFetching) {
        return <div className='flex justify-center items-center h-[50vh]'>
            <div className="loader !bg-primary"></div>
        </div>
    }
    return (
        <div className='w-full flex flex-col gap-4 '>
            <div className="px-12 max-md:px-2 text-black text-opacity-90 text-[28px] font-bold font-['Alexandria'] leading-[42px]">{DataPracListGetDataById?.info?.title}</div>

            {DataPracListGetDataById?.info?.PracVideos?.length == 0 ?
                <Empty />
                :
                <div className='flex justify-center  gap-10 max-md:flex-wrap'>
                    <div className="md:w-[30%] w-full h-fit  rounded-[10px] border border-zinc-300 listStyle">
                        {DataPracListGetDataById?.info?.PracVideos?.map((item, index) => <ItemListVideo data={item} key={index} isSelected={item.PreviewVideos.some(it => it.PracVideoId == item.id)} id={id} />
                        )}
                    </div>
                    <div className="md:w-[60%] w-full flex flex-col gap-4">
                        <div className="h-[420px] w-full rounded-[10px] bg-black " >
                            {!videoId && <div className="relative  text-white w-full h-full flex justify-center items-center">
                                <div onClick={async () => {
                                    const videoId = DataPracListGetDataById?.info?.PracVideos[0].id
                                    await PreviewvideosCreate({
                                        pracVideoId: videoId,
                                        userId: String(session.data?.user.userInfo.id),
                                        status: true,
                                    }).unwrap();


                                    router.push(`/practicalTraining/${id}?videoId=${videoId}`)
                                }} className=''>
                                    <IconPlayVideo className='w-16 hover:text-primary' />
                                </div>
                            </div>}
                            <ReactPlayer
                                style={{
                                    borderRadius: "10px",
                                }}
                                url={DataPracListGetDataById?.info?.PracVideos?.find(item => item.id == videoId)?.videoUrl}
                                width='100%'
                                height='100%'
                                controls={true}

                            />
                        </div>

                        <div className="text-right w-full text-black text-opacity-90 text-2xl font-semibold font-['Alexandria'] leading-9">{DataPracListGetDataById?.info?.PracVideos?.find(item => item.id == videoId)?.title}</div>
                        <div className="text-right w-full text-black text-opacity-40 text-base font-normal font-['Alexandria'] leading-normal" > {DataPracListGetDataById?.info?.PracVideos?.find(item => item.id == videoId)?.description}</div>

                    </div>

                </div>}
        </div>

    )
}

export const ItemListVideo = ({ data, isSelected, id }: { id: string, data: PracVideoDataResponse, isSelected: boolean }) => {
    const router = useRouter()
    const session = useSession()
    const [PreviewvideosCreate, { isLoading: isLoadingPreviewvideosCreate }] = usePreviewvideosCreateMutation()
    return (

        <div
            onClick={async () => {
                if (!isSelected) {
                    await PreviewvideosCreate({
                        pracVideoId: data.id,
                        userId: String(session.data?.user.userInfo.id),
                        status: true,
                    }).unwrap();
                }


                router.push(`/practicalTraining/${id}?videoId=${data.id}`)
            }}
            className="w-full h-[74px] p-3.5 hover:bg-zinc-100  items-center gap-3 inline-flex item-style border-collapse border">
            {!isSelected ?
                <div className="w-5 h-5 rounded-full border-2  hover:border-zinc-300" />
                : <svg className='text-primary' width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="10" cy="10" r="10" fill="currentColor" />
                    <mask id="mask0_58_1414" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
                        <rect width="20" height="20" fill="#D9D9D9" />
                    </mask>
                    <g mask="url(#mask0_58_1414)">
                        <path d="M8.33439 11.3333L13.2511 6.41667C13.4038 6.26389 13.5983 6.1875 13.8344 6.1875C14.0705 6.1875 14.2649 6.26389 14.4177 6.41667C14.5705 6.56944 14.6469 6.76389 14.6469 7C14.6469 7.23611 14.5705 7.43056 14.4177 7.58333L8.91772 13.0833C8.75106 13.25 8.55661 13.3333 8.33439 13.3333C8.11217 13.3333 7.91772 13.25 7.75106 13.0833L5.58439 10.9167C5.43161 10.7639 5.35522 10.5694 5.35522 10.3333C5.35522 10.0972 5.43161 9.90278 5.58439 9.75C5.73717 9.59722 5.93161 9.52083 6.16772 9.52083C6.40384 9.52083 6.59828 9.59722 6.75106 9.75L8.33439 11.3333Z" fill="white" />
                    </g>
                </svg>}

            <div className="flex-col justify-center gap-1 inline-flex">
                <div className="justify-start items-center gap-2 inline-flex">
                    <div className="text-black text-opacity-90 text-sm font-medium font-['Alexandria'] leading-normal">{data.title}</div>
                </div>
                <div className="text-black text-opacity-60 text-xs font-normal font-['Alexandria'] leading-[18px]">(3:36)</div>
            </div>
        </div>

    )
}