import React, { useRef, useState } from "react";
import UserLayout from "./Layout/UserLayout";

import MDEditor from "@uiw/react-md-editor";
import ReactPlayer from "react-player";
import { Link } from "@inertiajs/react";
import Swal from "sweetalert2";
import HitApi from "../../Utils/HitApi";

const Module = (props) => {
    const [markdown, setMarkdown] = useState(props.data.materi);

    const { materi_selanjutnya } = props;

    const [isLike, setIsLike] = useState(props.isLike);

    const setValue = (value) => {
        setMarkdown(value);
    };

    const handleSukai = () => {
        // Swal.fire({
        //     title: "Loading",
        //     html: '<div class="body-loading"><div class="loadingspinner"></div></div>', // add html attribute if you want or remove
        //     allowOutsideClick: false,
        //     showConfirmButton: false,
        // });

        
        HitApi({
            url: "/api/v1/materi/like",
            method: "POST",
            body: {
                id: props.data.id,
                id_user: props.idUser,
            },
            onSuccess: () => {
                setIsLike(!isLike);
                
                // Swal.close();
            },
        });
    };

    return (
        <UserLayout showBack={true} title={props.data.name} showNavbar={false}>
            <div className="w-full flex flex-col  py-4 container mt-6">
                <div className="w-full">
                    <ReactPlayer
                        width={"100%"}
                        controls
                        url={props.data.video}
                    />
                </div>
                <div data-color-mode="light" className="text-base mt-4">
                    {/* <MDEditor
                        value={markdown}
                        highlightEnable={false}
                        minHeight={'100%'}
                        onChange={setValue}
                    /> */}
                    <MDEditor.Markdown
                        style={{
                            fontSize: 30,
                        }}
                        className="min-h-[200px] p-4"
                        source={markdown}
                    />
                </div>
                <div className="flex items-center mt-4 justify-between">
                    <button
                        onClick={() => {
                            handleSukai();
                        }}
                        className={`btn ${
                            isLike ? "btn-primary" : "btn-outline"
                        }`}
                    >
                        {isLike ? "Disukai" : "Sukai"}
                    </button>
                    {materi_selanjutnya && (
                        <div className=" flex justify-end">
                            <Link
                                href={`/user/${
                                    materi_selanjutnya.kategori == "materi"
                                        ? "materi"
                                        : "quiz"
                                }/${materi_selanjutnya.id}`}
                            >
                                <div className="bg-primary text-white flex flex-col justify-end items-end px-6 py-2 cursor-pointer">
                                    <div className="font-semibold">
                                        Materi selanjutnya
                                    </div>
                                    <div className="text-xs">
                                        {materi_selanjutnya.name}
                                    </div>
                                </div>
                            </Link>
                        </div>
                    )}
                </div>
            </div>
        </UserLayout>
    );
};

export default Module;