import React, { useState } from "react";
import AdminLayout from "./Layout/AdminLayout";
import MDEditor from "@uiw/react-md-editor";
import { Link } from "@inertiajs/react";
import Swal from "sweetalert2";
import HitApi from "../../Utils/HitApi";

const InputMateri = (props) => {
    const { data } = props;
    const [form, setForm] = useState({
        materi: data.materi ?? "",
        video: data.video ?? "",
        fileVideo: undefined,
    });

    const handleSubmit = (e) => {
        e.preventDefault();

        Swal.fire({
            title: "Konfirmasi",
            text: "Apakah anda yakin ingin menyimpan data?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ya",
        }).then((result) => {
            if (result.isConfirmed) {
                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,
                });

                if (form.fileVideo) {
                    const formData = new FormData();
                    formData.append("file", form.fileVideo);
                    formData.append("id", data.id);
                    formData.append("video", form.video);
                    formData.append("materi", form.materi);

                    HitApi({
                        url: "/api/v1/materi/input",
                        method: "POST",
                        body: formData,
                        onSuccess: (res) => {
                            Swal.fire(
                                "Berhasil",
                                "Data berhasil disimpan",
                                "success"
                            );
                        },
                        onError: () => {
                            // Swal.fire("Gagal", "Data gagal ditambahkan", "error");
                        },
                        isFormData: true,
                    });
                } else {
                    HitApi({
                        url: "/api/v1/materi/input",
                        method: "POST",
                        body: { ...form, id: data.id },
                        onSuccess: () => {
                            Swal.fire(
                                "Berhasil",
                                "Data berhasil disimpan",
                                "success"
                            );
                        },
                        onError: () => {
                            // Swal.fire("Gagal", "Data gagal ditambahkan", "error");
                        },
                    });
                }
            }
        });
    };

    return (
        <AdminLayout title="Materi">
            <form onSubmit={handleSubmit} className="flex flex-col w-full">
                {/* <div className="text-xs breadcrumbs mb-2">
                    <ul>
                        <li>
                            <Link href="/admin/materi">SD</Link>
                        </li>
                        <li>
                            <Link href="/admin/materi/detail">Matematika</Link>
                        </li>
                        <li>Input Materi</li>
                    </ul>
                </div> */}
                <h1 className="py-3 font-semibold text-lg">
                    Judul: {data.name}
                </h1>
                <MDEditor
                    value={form.materi}
                    highlightEnable={false}
                    minHeight={"100%"}
                    onChange={(e) => setForm({ ...form, materi: e })}
                />

                <label className="form-control w-full mt-3">
                    <div className="label">
                        <span className="label-text font-semibold">
                            Input Video
                        </span>
                    </div>
                    <input
                        value={form.video}
                        onChange={(e) =>
                            setForm({ ...form, video: e.target.value })
                        }
                        type="text"
                        placeholder="Type here"
                        className="input input-bordered w-full"
                    />
                </label>

                <label className="form-control w-full mt-3">
                    <div className="label">
                        <span className="label-text font-semibold">
                            Upload Video
                        </span>
                    </div>
                    <input
                        accept="video/*"
                        type="file"
                        onChange={(e) =>
                            setForm({ ...form, fileVideo: e.target.files[0] })
                        }
                        className="file-input file-input-bordered w-full max-w-xs"
                    />
                </label>

                <div className="flex flex-row justify-start mt-4">
                    <button type="submit" className="btn btn-primary">
                        Simpan
                    </button>
                </div>
            </form>
        </AdminLayout>
    );
};

export default InputMateri;