"use client";
import { useEffect, useRef, useState } from "react";
import { useLang } from "@/lib/lang";
import { useAccess } from "@/lib/access";
import { BackBtn, Box, Button, ButtonContainer, CourseToolsBtn, Frame, Input, Textarea, useData, useFormRefs } from "@/Theme/Midone";
import { usePathname } from 'next/navigation';
import { Description } from "@/Theme/Midone/Utils";
import Pdf from "./Pdf";
import { Player } from "./Player/Player";
import ImageDocs from "./ImageDocs";
import { useAuth, useConfig } from "@/lib";


export function ViewInfo({ laraPath, id, course, mediaPath }) {
    let component = useFormRefs();
    const {user} = useAuth({guard: "admin"});
    const userId = user?.id;
    const {nextAdmin} = useConfig();
    const { Lang, local } = useLang();
    let { get } = useData();
    const formUrl = "/contents-view";
    const fileUrl = "/courses/" + course;
    const title = "learnpath";
    let url = laraPath + formUrl + "/" + id;
    const menuPath = usePathname().split('/').includes('myCourses') ? 'myCourses' : 'courses';
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

    useEffect(() => { if(id != undefined) get(url, component, "info"); }, []);
    let data = component?.state?.info;


    useEffect(() => {
        $('[role="tab"]').on('click', (event) => {
            $(`[tab-group="${$(event.target).data('tab-group')}"]`).addClass('hidden')
            $($(event.target).data('tabs-target')).removeClass('hidden')
            $('[role="tab"]').removeClass('active')
            $(event.target).addClass('active')

            switch ($(event.target).attr('data-tabs-target')) {
                case '#video':
                    const audioes = document.querySelectorAll('audio'); // get the audioes element
                    audioes.forEach(audio => {
                        audio.pause(); // pause the audio
                    })
                    break;
                case '#audio':
                    const videos = document.querySelectorAll('video'); // get the videos element
                    videos.forEach(video => {
                        video.pause(); // pause the video
                    })
                    break;

                default:
                    break;
            }

        });
    }, [])



    let images = [];
  

    return (
            <div className="mx-auto">
                <div className="bg-white rounded border-b border-gray-200 dark:border-gray-700 mt-5">
                    <ul className="flex flex-wrap -mb-px">
                        <li>
                            <button role='tab' data-tab-group="tabpanel" className="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" data-tabs-target="#detail" type="button" >
                                {Lang('public.detail')}
                            </button>
                        </li>
                        <li>
                            <button role='tab' data-tab-group="tabpanel" className="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300 active" data-tabs-target="#image_pdf" type="button"> 
                                
                                 {Lang('public.content_lesson(PDF)')}
                            </button>
                        </li>
                        <li>
                            <button role='tab' data-tab-group="tabpanel" className="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" data-tabs-target="#mobile_pdf" type="button">
                                {Lang('public.mobile_pdf')}
                            </button>
                        </li>
                        <li>
                            <button role='tab' data-tab-group="tabpanel" className="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" data-tabs-target="#video" type="button">
                                
                                {Lang('public.video')}
                            </button>
                        </li>
                        <li>
                            <button role='tab' data-tab-group="tabpanel" className="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" data-tabs-target="#audio" type="button">
                            {Lang('public.audio')}
                            </button>
                        </li>
                        {
                            menuPath=="myCourses" &&
                                <li>
                                    <button role='tab' data-tab-group="tabpanel" className="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" data-tabs-target="#notes" type="button">
                                    {Lang('public.mynotes')}
                                    </button>
                                </li>
                        }
                    </ul>
                </div>
                <div>
                    <div className="rounded-lg dark:bg-gray-800 overflow-auto max-h-screen hidden" id="detail" tab-group="tabpanel">
                        <Box cols="grid-cols-1" title={Lang(["public.view", "public." + title])} >
                            <h2 className="intro-y font-medium text-xl sm:text-2xl">
                                {data.title}
                            </h2>
                            <ul>
                                <li>
                                    <h4 className="font-bold">{Lang(["public.description"])} :</h4>
                                    <div className="pr-2" dangerouslySetInnerHTML={{ __html: data.description?.replace(/\n/g, "<br />") }}></div>
                                </li>

                                <li>
                                    <h4 className="font-bold">{Lang(["public.duration"])} : </h4> {data.duration}
                                </li>

                                <li>
                                    <h4 className="font-bold">{Lang(["public.status"])} :</h4>  {data?.active_status?.["title_" + local]}
                                </li>

                            </ul>

                        </Box>
                    </div>
                    <div className="rounded-lg dark:bg-gray-800" id="image_pdf" tab-group="tabpanel">
                        {
                            data.image_pdf?.map((item, index) => {
                                let ext = item?.substr(item?.length - 4);

                                if (ext == '.bcr') {
                                    return <div key={index} className="intro-y box px-2 md:px-5 mt-5 overflow-auto" style={{ background: '#1e2434' }} id={`reader-desktop-${index}`}>
                                        <div className={isMobile ? "px-0 md:px-5 py-5 flex min-h-[80vh] relative items-start justify-center pdf-reader" : "px-0 md:px-5 py-5 flex h-[100vh] relative items-start justify-center pdf-reader"}>
                                            <Pdf fileUrl={fileUrl} file={item} parent={`reader-desktop-${index}`} />
                                        </div>
                                    </div>
                                } else {
                                    images.push(item);
                                }
                            })
                        }

                        {
                            images.length > 0 && <ImageDocs images={images} mediaPath={mediaPath} fileUrl={fileUrl} />
                        }

                    </div>
                    <div className="rounded-lg dark:bg-gray-800 hidden" id="mobile_pdf" tab-group="tabpanel">
                        {
                            data.mobile_pdf?.length > 0 ? data.mobile_pdf?.map((item, index) => {
                                let ext = item?.substr(item?.length - 4);

                                if (ext == '.bcr') {
                                    return <div key={index} className="intro-y box px-2 md:px-5 mt-5" style={{ background: '#1e2434' }} id={`reader-mobile-${index}`}>
                                        <div className={isMobile ? "px-0 md:px-5 py-5 flex min-h-[80vh] relative items-start justify-center pdf-reader" : "px-0 md:px-5 py-5 flex h-[100vh] relative items-start justify-center pdf-reader"}>
                                            <Pdf fileUrl={fileUrl} file={item} parent={`reader-mobile-${index}`}/>
                                        </div>
                                    </div>
                                }
                            })
                                :
                                <Box className="text-center">
                                    <div className="w-full col-span-full">
                                        <h3>
                                            {Lang('public.no_finding_data')}
                                        </h3>
                                    </div>
                                </Box>
                        }
                    </div>
                    <div className="rounded-lg dark:bg-gray-800 overflow-auto max-h-screen hidden" id="video" tab-group="tabpanel">
                        {
                            data?.video?.length > 0 ? <div className="intro-y">
                                <Player videos={data.video} basePath={mediaPath + fileUrl + '/video'} />
                            </div>
                                :
                                <Box className="text-center">
                                    <div className="w-full col-span-full">
                                        <h3>
                                            {Lang('public.no_finding_data')}
                                        </h3>
                                    </div>
                                </Box>
                        }

                    </div>

                    <div className="rounded-lg dark:bg-gray-800 overflow-auto max-h-screen hidden" id="audio" tab-group="tabpanel">
                        {
                            data.audio?.length > 0 ? <Box className="text-center">
                                <div className="w-full col-span-full">
                                    <div className="sticky top-0 text-right">
                                        <h2>
                                        {Lang('public.audio')}
                                        </h2>
                                        <hr className="mb-8 w-full" />
                                    </div>
                                    <div>
                                        {
                                            data.audio?.map((item,index) => {
                                                let ext = item?.substr(item?.length - 4);

                                                return <div key={index} className="sm:mx-auto md:mx-2 mb-4 inline">
                                                    <audio className="w-full" controls onPlay={(event) => Play(event)}>
                                                        {
                                                            (ext == '.ogg') ? <source src={`${mediaPath + fileUrl + '/audio'}/${item}`} type="audio/ogg" /> : <source src={`${mediaPath + fileUrl + '/audio'}/${item}`} type="audio/mpeg" />
                                                        }
                                                        Your browser does not support the audio element.
                                                    </audio>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </Box>
                                :
                                <Box className="text-center">
                                    <div className="w-full col-span-full">
                                        <h3>
                                            {Lang('public.no_finding_data')}
                                        </h3>
                                    </div>
                                </Box>
                        }
                    </div>
                    <div className="rounded-lg dark:bg-gray-800 overflow-auto max-h-screen hidden" id="notes" tab-group="tabpanel">
                        <MyNotes component={component} laraPath={laraPath} id={id} data={data} url={url} userId={userId} />
                    </div>
                </div>
            </div>
    );
}

function Play(e) {

    const nowPlay = $(e.target).find('source').attr('src');
    const audioes = document.querySelectorAll('audio'); // get the audio element

    audioes.forEach(audio => {
        if ($(audio).find('source').attr('src').includes(nowPlay)) { // check if the audio src includes the nowPlay
            audio.play(); // play the audio
        } else {
            audio.pause(); // pause the audio
        }
    })
}

const MyNotes = ({ laraPath, id, data, url, userId}) => {
    const component = useFormRefs();
    const [ editMyNote, setEditMyNote ] = useState();
    const [ reload, setReload ] = useState(0);
    const [ notes, setNotes ] = useState(data);
    const { get, save, destroy } = useData();
    const { Lang, local } = useLang();

    useEffect(()=>{
        if(data?.notes?.length != 0) 
            setNotes(data?.notes);
    }, [data]);

    useEffect(()=>{
        if(reload != 0) 
            get(url.replace("/mastership/contents/", "/mastership/contents/notes/"), "", "", (response) => setNotes(response))
    }, [reload]);

    const newNote = () => save(laraPath +"/learnpath-note", component, "new", "", ()=>{ setReload(Math.random) });
    const updateNote = () => save(laraPath +"/learnpath-note/"+editMyNote, component, "edit", "", ()=>{ setReload(Math.random); setEditMyNote(0) });

    const cancelEditNote = (noteId) =>{
        setEditMyNote("");
    }

    return (<>
        <Input type="hidden" defaultValue={id} refItem={[component, 'learnPath_id']} />
        <div className="grid grid-cols-12 ltr">
            <div className="md:col-span-4 col-span-12">
                <Box>
                    <Textarea className="col-span-12" label="write_note" refItem={[component, 'note']} />
                    <ButtonContainer className="col-span-12">
                        <Button label="save_note" onClick={newNote} />
                    </ButtonContainer>
                </Box>
            </div>
            <div className="sm:col-span-12 xs:col-span-12 md:col-span-8">
                {
                    notes?.length > 0 ? 
                    <Box cols="col-8">
                    {
                        notes?.map((item, index) => {
                            const isEditing = editMyNote === item?.id;
                            const isOwner = userId === item?.user_id;

                            return (
                                <div key={index} className="mb-4">
                                    {isEditing ? (
                                        <Textarea
                                            defaultValue={item?.note}
                                            label="note"
                                            refItem={[component, 'note']}
                                            className="col-span-12"
                                        />
                                    ) : (
                                        <div id={`note_${item?.id}`} className="alert alert-secondary show mb-2" role="alert">
                                            <div className="flex items-center">
                                                <Button
                                                    className="text-xs bg-gray-600 px-1 rounded-md text-white mr-auto"
                                                    label="edit"
                                                    onClick={() => setEditMyNote(item?.id)}
                                                />
                                                <Button
                                                    className="text-xs bg-gray-600 px-1 rounded-md text-white mr-2"
                                                    label="delete"
                                                    // onClick={() => delNote(item?.id)}
                                                    onClick={()=>destroy(laraPath+"/learnpath-note/"+item.id, ()=>setReload(Math.random))}
                                                />
                                            </div>
                                            <div className="mt-3">
                                                <Description text={item?.note} />
                                                {/* {item?.note} */}
                                            </div>
                                        </div>
                                    )}

                                    {isOwner && isEditing && (
                                        <ButtonContainer>
                                            <Button label="save_note" onClick={() => updateNote(item?.id)} />
                                            <Button label="cancel" onClick={() => cancelEditNote(item?.id)} />
                                        </ButtonContainer>
                                    )}
                                </div>
                            );
                        })
                    }
                    </Box> : 
                    <Box cols="12"> {Lang("no_notes")} </Box>
                }
            </div>
        </div>

        
    </>)
}