web-humas-fe/components/form/master/master-user-level/master-user-level-form.tsx

'use client'
import { Button } from "@nextui-org/button";
import { Card, Checkbox, CheckboxGroup, Divider, Image, Input, Radio, RadioGroup, Select, SelectItem, SelectSection, Slider, Switch, Tab, Table, Tabs, Textarea, User } from "@nextui-org/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 { createUserLevels } from "@/services/user-levels/user-levels-service";

const LevelList = [
    { label: "Admin", value: "admin", id: 1 },
    { label: "Super-Admin", value: "super-admin", id: 2 },
    { label: "Kurator", value: "kurator", id: 3 },
    { label: "Supervisor", value: "supervisor", id: 4 },
];

const moduleList = [
    { label: "Article", value: "article", id: 1 },
    { label: "Caption", value: "caption", id: 2 },
    { label: "Meme", value: "meme", id: 3 },
    { label: "Video", value: "video", id: 4 },
    { label: "Master Data", value: "master-data", id: 5 },
];

const provinceList = [
    { label: "NTT", value: "1", id: 1 },
    { label: "NTB", value: "2", id: 2 },
    { label: "Aceh", value: "3", id: 3 },
    { label: "Jawa Timur", value: "4", id: 4 },
    { label: "Jawa Barat", value: "5", id: 5 },
];

export default function CreateMasterUserLevelForm() {
    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 [haveChildren, setHaveChildren] = useState("no");
    const [active, setTrue] = useState("true");
    const [levelValue, setLevelValue] = useState<any>("");
    const handleTab = (tab: any) => {
        setTabs(tab);
    };

    const handleActive = (e: React.ChangeEvent<HTMLInputElement>) => {
        setTrue(e.target.value);
    };

    const handleHaveChildren = (e: React.ChangeEvent<HTMLInputElement>) => {
        setHaveChildren(e.target.value);
    };

    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({
        name: z.string().min(1, { message: "Required" }),
        aliasName: z.string().min(1, { message: "Required" }),
        // levelNumber: 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 selectedLevel = Number(Array.from(levelValue).pop());
        const request = {
            name: data.name,
            aliasName: data.aliasName,
            levelNumber: selectedLevel,
            isActive: active,
        };

        console.log(request);
        loading();
        const res = await createUserLevels(request);
        if (res.error) {
            error(res.message);
            return false;
        }
        close();
        successSubmit("/admin/master/master-user-level")
    }

    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 ">
                    <div className="w-full mr-2 p-5 ">
                        <form method="POST" onSubmit={handleSubmit(onSubmit)}>
                            <>
                                <div className="flex flex-row gap-1">
                                    <div className="w-6/12 justify-start items-start mt-2 gap-3">
                                        <div className="flex flex-col ">
                                            <Input
                                                type="text"
                                                label="Nama"
                                                id="name"
                                                {...register("name")}
                                                placeholder="Input Name"
                                                labelPlacement="outside"
                                                className=" font-semibold"
                                                classNames={{
                                                    label: "!text-black dark:!text-white",
                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                }}
                                                startContent={
                                                    <div className="pointer-events-none flex items-center">
                                                        <span className="text-default-400 text-small"></span>
                                                    </div>
                                                }
                                            />
                                            {errors.name?.message && (
                                                <p className="text-red-400 text-sm">
                                                    {errors.name?.message}
                                                </p>
                                            )}
                                        </div>
                                        <div className="flex flex-col mt-3">
                                            <Input
                                                type="text"
                                                label="Alias Name"
                                                id="aliasName"
                                                {...register("aliasName")}
                                                placeholder="Input Name"
                                                labelPlacement="outside"
                                                className=" font-semibold"
                                                classNames={{
                                                    label: "!text-black dark:!text-white",
                                                    input: "!text-black dark:!text-white hover:!text-black focus:!text-black",
                                                    inputWrapper: "max-h-[40px] bg-transparant border text-black",
                                                }}
                                                startContent={
                                                    <div className="pointer-events-none flex items-center">
                                                        <span className="text-default-400 text-small"></span>
                                                    </div>
                                                }
                                            />
                                            {errors.aliasName?.message && (
                                                <p className="text-red-400 text-sm">
                                                    {errors.aliasName?.message}
                                                </p>
                                            )}
                                        </div>
                                        <div className="my-3 ">
                                            <p className="text-black dark:text-white text-sm mb-1 font-semibold">Level Number</p>
                                            <Select
                                                variant="bordered"
                                                labelPlacement="outside"
                                                placeholder="Select Polda"
                                                selectedKeys={levelValue}
                                                onSelectionChange={setLevelValue}
                                                className="w-full"
                                                classNames={{
                                                    mainWrapper: "rounded",
                                                    listboxWrapper:
                                                        "bg-black w-full !text-indigo-500 text-center font-bold",
                                                    popoverContent: "bg-black !text-indigo-500",
                                                    trigger:
                                                        "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-black dark:!text-white",
                                                }}
                                                listboxProps={{
                                                    itemClasses: {
                                                        base: [
                                                            "!text-left",
                                                            "!bg-black",
                                                            "text-indigo-500 ",
                                                            "data-[selectable=true]:!text-indigo-500",
                                                            "data-[pressed=true]:text-indigo-500",
                                                            "data-[hover=true]:!text-indigo-300",
                                                        ],
                                                        wrapper: ["!bg-black border-none"],
                                                    },
                                                }}
                                                renderValue={(items) => {
                                                    return items.map((item) => (
                                                        <span key={item.props?.value} className="text-black dark:text-white text-xs">
                                                            {item.textValue}
                                                        </span>
                                                    ));
                                                }}
                                            >
                                                <SelectSection showDivider title="List Level">
                                                    {LevelList.map((list: any) => (
                                                        <SelectItem key={list.id} value={list.id}>
                                                            {list.label}
                                                        </SelectItem>
                                                    ))}
                                                </SelectSection>
                                            </Select>
                                        </div>
                                        <div className="mt-3 ">
                                            <p className="text-black dark:text-white text-sm mb-1 font-semibold">Parent LevelId</p>
                                            <Select
                                                variant="bordered"
                                                selectionMode="single"
                                                labelPlacement="outside"
                                                placeholder="Select"
                                                className="font-semibold"
                                                items={moduleList}
                                                classNames={{
                                                    mainWrapper: "rounded",
                                                    listboxWrapper:
                                                        "bg-black w-full !text-indigo-500 text-center font-bold",
                                                    popoverContent: "bg-black !text-indigo-500",
                                                    trigger:
                                                        "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-black dark:!text-white",
                                                }}
                                                listboxProps={{
                                                    itemClasses: {
                                                        base: [
                                                            "!text-left",
                                                            "!bg-black",
                                                            "text-indigo-500 ",
                                                            "data-[selectable=true]:!text-indigo-500",
                                                            "data-[pressed=true]:text-indigo-500",
                                                            "data-[hover=true]:!text-indigo-300",
                                                        ],
                                                        wrapper: ["!bg-black border-none"],
                                                    },
                                                }}
                                                renderValue={(items) => {
                                                    return items.map((item) => (
                                                        <span key={item.props?.value} className="text-black dark:text-white text-xs">
                                                            {item.textValue}
                                                        </span>
                                                    ));
                                                }}
                                            >
                                                <SelectSection showDivider title="Module">
                                                    {moduleList.map((list) => (
                                                        <SelectItem key={list.id} value={list.id}>
                                                            {list.label}
                                                        </SelectItem>
                                                    ))}
                                                </SelectSection>
                                            </Select>
                                        </div>
                                        <div className="mt-3 ">
                                            <p className="text-black dark:text-white text-sm mb-1 font-semibold">Provinsi</p>
                                            <Select
                                                variant="bordered"
                                                selectionMode="single"
                                                labelPlacement="outside"
                                                placeholder="Select"
                                                className="font-semibold"
                                                items={provinceList}
                                                classNames={{
                                                    mainWrapper: "rounded",
                                                    listboxWrapper:
                                                        "bg-black w-full !text-indigo-500 text-center font-bold",
                                                    popoverContent: "bg-black !text-indigo-500",
                                                    trigger:
                                                        "border-1 border-gray-200 hover:!bg-white dark:hover:!bg-black !text-black dark:!text-white",
                                                }}
                                                listboxProps={{
                                                    itemClasses: {
                                                        base: [
                                                            "!text-left",
                                                            "!bg-black",
                                                            "text-indigo-500 ",
                                                            "data-[selectable=true]:!text-indigo-500",
                                                            "data-[pressed=true]:text-indigo-500",
                                                            "data-[hover=true]:!text-indigo-300",
                                                        ],
                                                        wrapper: ["!bg-black border-none"],
                                                    },
                                                }}
                                                renderValue={(items) => {
                                                    return items.map((item) => (
                                                        <span key={item.props?.value} className="text-black dark:text-white text-xs">
                                                            {item.textValue}
                                                        </span>
                                                    ));
                                                }}
                                            >
                                                <SelectSection showDivider title="Provinsi">
                                                    {provinceList.map((list) => (
                                                        <SelectItem key={list.id} value={list.id}>
                                                            {list.label}
                                                        </SelectItem>
                                                    ))}
                                                </SelectSection>
                                            </Select>
                                        </div>
                                        <div className="text-black mt-3">
                                            <p className=" text-black dark:text-white ">Status</p>
                                            <RadioGroup
                                                orientation="horizontal"
                                                id="radio-banned"
                                                className="text-gray-950 mb-2"
                                                onChange={handleActive}
                                                defaultValue={active}
                                                classNames={{
                                                    label: "!text-black dark:!text-white",
                                                    description: "!text-black",
                                                    base: "!text-black",
                                                    wrapper: "!text-black",
                                                }}
                                            >
                                                <Radio
                                                    classNames={{
                                                        label: "!text-black dark:!text-white",
                                                    }}
                                                    value="true"
                                                >
                                                    Active
                                                </Radio>
                                                <Radio
                                                    classNames={{
                                                        label: "!text-black dark:!text-white",
                                                    }}
                                                    value="false"
                                                >
                                                    Inactive
                                                </Radio>
                                            </RadioGroup>
                                        </div>
                                        <div className="flex flex-row gap-3 my-3">
                                            <Link href="/admin/master/master-user-level">
                                                <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>
                                    <div className="w-6/12 ">
                                        <div className="flex items-center justify-center justify-items-center h-full">
                                            <Image
                                                width={400}
                                                alt="NextUI hero Image"
                                                src="/account-category.jpg"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </>
                        </form>
                    </div>
                </Card>
            </div>
        </div >

    )
}