'use client'
import { Button } from "@heroui/button";
import { Card, Checkbox, CheckboxGroup, Divider, Input, Radio, RadioGroup, Select, SelectItem, Slider, Switch, Tab, Table, Tabs, Textarea, User } from "@heroui/react";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { TimesIcon } from "@/components/icons";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { close, error, loading } from "@/config/swal";
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
import dynamic from 'next/dynamic';
import { useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import parse from 'html-react-parser';

export default function CreateMagazineForm() {
    const router = useRouter();
    const JoditEditor = dynamic(() => import('jodit-react'), { ssr: false });
    const MySwal = withReactContent(Swal);
    const [isVisible, setIsVisible] = useState(false);
    const [tabs, setTabs] = useState<string>("personal-info")
    const editor = useRef(null);
    const [content, setContent] = useState('');
    const handleTab = (tab: any) => {
        setTabs(tab);
    };

    let [files, setFiles] = useState<File[]>([]);

    const removeFile = (name: string) => {
        const arrayFile: File[] = [];
        for (const element of files) {
            if (element.name !== name) {
                arrayFile.push(element);
            }
        }
        setFiles(arrayFile);
    };

    const handleFileChange = (event: any) => {
        const newFiles: FileList | null = event.target.files;
        if (newFiles) {
            const allowedExtensions = ['.doc', '.docx', '.pdf', '.ppt', '.pptx', '.xlsx', '.csv'];
            let temp: File[] = [...files]; // Salin file-file yang sudah ada
            for (let i = 0; i < newFiles.length; i++) {
                const file = newFiles[i];
                const fileExtension = file.name.split('.').pop()?.toLowerCase();
                if (fileExtension && allowedExtensions.includes(`.${fileExtension}`)) {
                    temp.push(file);
                } else {
                    alert('Format file tidak valid. Hanya file .doc, .docx, .ppt, .pptx, .xlsx, .csv atau .pdf yang diperbolehkan.');
                }
            }
            setFiles(temp);
        }
    };

    const toggleVisibility = () => setIsVisible(!isVisible);

    const validationSchema = z.object({
        title: z.string().min(1, { message: "Required" }),
        slug: z.string().min(1, { message: "Required" }),
    });

    const formOptions = { resolver: zodResolver(validationSchema) };
    type ArticleSchema = z.infer<typeof validationSchema>;

    const { register, handleSubmit, formState: { errors }, formState, setValue } = useForm<ArticleSchema>(formOptions);

    const save = async (data: any) => {
        const parsedContent = parse(content);
        console.log(parsedContent);
        const request = {
            title: data.title,
            slug: data.slug,
            articleBody: data.articleBody,
            status: 1,
        };

        console.log(request);

        // loading();
        // // const res = await saveManualContext(request);
        // if (res.error) {
        //     error(res.message);
        //     return false; 
        // }
        close();
        successSubmit("/admin/magazine")
    }

    async function onSubmit(data: any) {
        MySwal.fire({
            title: "Save Data",
            text: "",
            icon: "warning",
            showCancelButton: true,
            cancelButtonColor: "#d33",
            confirmButtonColor: "#3085d6",
            confirmButtonText: "Save",
        }).then((result) => {
            if (result.isConfirmed) {
                save(data);
            }
        });
    }

    function successSubmit(redirect: string) {
        MySwal.fire({
            title: 'Sukses',
            icon: 'success',
            confirmButtonColor: '#3085d6',
            confirmButtonText: 'OK',
        }).then((result) => {
            if (result.isConfirmed) {
                router.push(redirect);
            }
        });
    }

    return (
        <div className="mx-3 my-5">
            <div className="flex flex-col gap-3 mb-4">
                <Card className="w-full bg-white">
                    <div className="w-full mr-2 p-5 ">
                        <form method="POST" onSubmit={handleSubmit(onSubmit)}>
                            <>
                                <div className="flex flex-col gap-1">
                                    <div className="flex flex-row justify-between items-center mt-[24px] gap-3">
                                        <div className="flex flex-col w-6/12">
                                            <Input
                                                type="text"
                                                label="Title"
                                                id="title"
                                                {...register("title")}
                                                placeholder="...."
                                                labelPlacement="outside"
                                                className="w-9/12 font-semibold"
                                                classNames={{
                                                    label: "!text-black",
                                                    input: "!text-black hover:!text-white focus:!text-white",
                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
                                                }}
                                                startContent={
                                                    <div className="pointer-events-none flex items-center">
                                                        <span className="text-default-400 text-small"></span>
                                                    </div>
                                                }
                                            />
                                            {errors.title?.message && (
                                                <p className="text-red-400 text-sm">
                                                    {errors.title?.message}
                                                </p>
                                            )}
                                        </div>
                                        <div className="flex flex-col w-6/12">
                                            <Input
                                                type="text"
                                                label="Slug"
                                                id="slug"
                                                {...register("slug")}
                                                placeholder="....."
                                                labelPlacement="outside"
                                                className="w-9/12 font-semibold"
                                                classNames={{
                                                    label: "!text-black",
                                                    input: "!text-black hover:!text-white focus:!text-white",
                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
                                                }}
                                                startContent={
                                                    <div className="pointer-events-none flex items-center">
                                                        <span className="text-default-400 text-small"></span>
                                                    </div>
                                                }
                                            />
                                            {errors.slug?.message && (
                                                <p className="text-red-400 text-sm">
                                                    {errors.slug?.message}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <div className="mt-1">
                                        <p className="text-black text-sm font-semibold my-2">Description</p>
                                        <JoditEditor
                                            ref={editor}
                                            value={content}
                                            onChange={(newContent) => setContent(newContent)}
                                            className="dark:text-black"
                                        />
                                    </div>
                                    <p className="text-sm text-black mt-2 pb-1 pt-3">Upload File (Opsional)</p>
                                    <div className="w-full bg-transparent">
                                        <div className="flex items-center justify-center w-full ">
                                            <label
                                                htmlFor="dropzone-file"
                                                className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-100 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
                                            >
                                                <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
                                                    <svg
                                                        className="w-10 h-10 mb-3 text-gray-400"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        viewBox="0 0 24 24"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                    >
                                                        <path
                                                            strokeLinecap="round"
                                                            strokeLinejoin="round"
                                                            strokeWidth="2"
                                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                                                        ></path>
                                                    </svg>
                                                    {/* <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                                            Drag and drop files here
                                        </p> */}
                                                    <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
                                                        {/* or{" "} */}
                                                        <span className="font-semibold underline text-amber-800">
                                                            Click to upload
                                                        </span>
                                                    </p>
                                                </div>
                                                <input id="dropzone-file" type="file" multiple accept=".doc,.docx,.pdf,.ppt,.pptx,.xlsx,.csv" className="hidden" onChange={handleFileChange} />
                                            </label>
                                        </div>
                                    </div>
                                    <p className="text-tiny text-default ">Support file format in word, excel, ppt and pdf</p>
                                    <div className="flex flex-wrap gap-3">
                                        {files?.length > 0 &&
                                            files?.map((list: File) => (
                                                <div key={list.name} className="text-black text-sm py-2 px-4 border-1 border-black w-auto rounded-lg flex justify-between gap-5">
                                                    {list.name}
                                                    <a className="cursor-pointer" onClick={() => removeFile(list.name)}><TimesIcon /></a>
                                                </div>
                                            ))
                                        }
                                    </div>
                                    <div className="flex flex-row gap-3 my-3">
                                        <Link href="/admin/magazine">
                                            <Button
                                                variant="bordered"
                                                className="bg-white border-grey-100  rounded-full text-[#8E5C18] mr-5"
                                            >
                                                Cancel
                                            </Button>{" "}
                                        </Link>
                                        <Button
                                            className="w-[50px]"
                                            color="primary"
                                            size="md"
                                            type="submit">
                                            Submit
                                        </Button>
                                    </div>
                                </div>
                            </>
                        </form>
                    </div>
                </Card>
            </div>
        </div >

    )
}