mediahub-fe/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx

"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Link, useRouter } from "@/i18n/routing";
import { CalendarIcon } from "lucide-react";
import React, { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { format } from "date-fns";
import JoditEditor from "jodit-react";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  getWeeklyPlanList,
  savePlanning,
} from "@/service/agenda-setting/agenda-setting";
import { id } from "date-fns/locale";
import { close, error, loading } from "@/config/swal";
import { getOnlyDate } from "@/utils/globals";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { getUserLevelForAssignments } from "@/service/task";
import dynamic from "next/dynamic";

const FormSchema = z.object({
  date: z.date({
    required_error: "Required",
  }),
  title: z.string({
    required_error: "Required",
  }),
  detail: z.string({
    required_error: "Required",
  }),
  output: z.array(z.string()).refine((value) => value.some((item) => item), {
    message: "Required",
  }),
  unit: z.array(z.string()).refine((value) => value.some((item) => item), {
    message: "Required",
  }),
  type: z.string({
    required_error: "Required",
  }),
  parentId: z.string({
    required_error: "Required",
  }),
  media: z.array(z.string()).refine((value) => value.some((item) => item), {
    message: "Required",
  }),
});

const items = [
  {
    id: "2",
    label: "Audio Visual",
  },
  {
    id: "1",
    label: "Foto",
  },
  {
    id: "4",
    label: "Audio",
  },
  {
    id: "3",
    label: "Text",
  },
];

const medias = [
  {
    id: "5",
    label: "X",
  },
  {
    id: "1",
    label: "Facebook",
  },
  {
    id: "2",
    label: "Instagram",
  },
  {
    id: "3",
    label: "Youtube",
  },
  {
    id: "4",
    label: "Tiktok",
  },
];

const units = [
  {
    id: "1",
    label: "Mabes Polri",
  },
  {
    id: "2",
    label: "Polda",
  },
  {
    id: "3",
    label: "Polres",
  },
  {
    id: "4",
    label: "Satker",
  },
];

const CustomEditor = dynamic(
  () => {
    return import("@/components/editor/custom-editor");
  },
  { ssr: false }
);

export default function CreateDaily() {
  const MySwal = withReactContent(Swal);
  const [weeklyList, setWeeklyList] = useState<any>();
  const router = useRouter();
  const [selected, setSelected] = useState<{ [key: string]: boolean }>({});
  const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({});
  const [listDest, setListDest] = useState<any>([]);

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      unit: [],
      output: [],
      detail: "",
      media: [],
    },
  });
  const editor = useRef(null);

  useEffect(() => {
    getWeeklyPlanning();
  }, []);

  async function getWeeklyPlanning() {
    const res = await getWeeklyPlanList(new Date().getDate(), 2);

    if (res?.data !== null) {
      const rawUser = res?.data?.data;
      const optionArr = rawUser.map((option: any) => ({
        id: option.id,
        label: option.title,
        value: String(option.id),
      }));
      setWeeklyList(optionArr);
    }
  }

  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
    if (form.getValues("detail") == "") {
      form.setError("detail", {
        type: "manual",
        message: "Required",
      });
    } else {
      MySwal.fire({
        title: "Simpan Data",
        text: "Apakah Anda yakin ingin menyimpan data ini?",
        icon: "warning",
        showCancelButton: true,
        cancelButtonColor: "#d33",
        confirmButtonColor: "#3085d6",
        confirmButtonText: "Simpan",
      }).then((result) => {
        if (result.isConfirmed) {
          save(data);
        }
      });
    }
  };

  const save = async (data: z.infer<typeof FormSchema>) => {
    const getSelectedString = () => {
      return Object.keys(selected)
        .filter((key) => selected[key])
        .join(", ");
    };
    loading();

    const reqData = {
      planningTypeId: 2,
      time: "1",
      title: data.title,
      assignmentTypeId: data.type, //string
      description: data.detail,
      assignedToLevel: unit?.join(","), //string
      assignmentPurpose: getSelectedString(), //string
      fileTypeOutput: data.output?.join(","), //string
      status: "Open",
      date: getOnlyDate(data.date),
      platformType: data.media?.join(","),
      parentId: Number(data.parentId), //number
      assignmentMainTypeId: 2,
    };

    console.log("req =>", reqData);
    const response = await savePlanning(reqData);

    if (response?.error) {
      error(response?.message);
      return false;
    }

    close();
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push("/curator/task-plan/medsos-mediahub");
      }
    });
  };

  const output = form.watch("output");
  const media = form.watch("media");
  const unit = form.watch("unit");

  const isAllChecked = items.every((item) => output?.includes(item.id));
  const isAllMediaChecked = medias.every((item) => media?.includes(item.id));
  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));

  useEffect(() => {
    async function initState() {
      const response = await getUserLevelForAssignments();
      setListDest(response?.data?.data.list);
    }

    initState();
  }, []);

  const handleParentChange = (listId: string) => {
    setSelected((prev) => ({
      ...prev,
      [listId]: !prev[listId],
    }));
  };

  const handleSelectAllPolres = (listId: string, isChecked: boolean) => {
    setSelectAll((prev) => ({
      ...prev,
      [listId]: isChecked,
    }));

    setSelected((prev) => {
      const updatedState = { ...prev };
      listDest
        .find((list: any) => list.id === listId)
        ?.subDestination.forEach((subDes: any) => {
          updatedState[`${listId}${subDes.id}`] = isChecked;
        });
      return updatedState;
    });
  };

  const handleChildChange = (childId: string) => {
    setSelected((prev) => ({
      ...prev,
      [childId]: !prev[childId],
    }));
  };

  return (
    <div>
      <SiteBreadcrumb />
      <div className="flex flex-col gap-4">
        <div className="flex flex-row justify-center gap-5 mt-10">
          <Link
            href="/curator/task-plan/medsos-mediahub/create-monthly"
            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
          >
            Bulanan
          </Link>
          <Link
            href="/curator/task-plan/medsos-mediahub/create-weekly"
            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
          >
            Mingguan
          </Link>

          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
            Harian
          </div>
        </div>
        <div className="flex flex-col bg-white gap-2 p-6">
          <p className="text-lg">Perencanaan MediaHub</p>

          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
              <FormField
                control={form.control}
                name="title"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Judul Perencanaan</FormLabel>
                    <Input
                      value={field.value}
                      placeholder="Masukkan Judul Perencanaan"
                      onChange={field.onChange}
                    />

                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="output"
                render={() => (
                  <FormItem>
                    <div className="mb-4">
                      <FormLabel className="text-sm">Output Tugas</FormLabel>
                    </div>
                    <div className="flex flex-row gap-3 items-center ">
                      <div className="flex items-center gap-3">
                        <Checkbox
                          id="all"
                          checked={isAllChecked}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              form.setValue(
                                "output",
                                items.map((item) => item.id)
                              );
                            } else {
                              form.setValue("output", []);
                            }
                          }}
                        />
                        <label htmlFor="all" className="text-sm">
                          Semua
                        </label>
                      </div>

                      {items.map((item) => (
                        <FormField
                          key={item.id}
                          control={form.control}
                          name="output"
                          render={({ field }) => {
                            return (
                              <FormItem
                                key={item.id}
                                className="flex flex-row items-start space-x-3 space-y-0"
                              >
                                <FormControl>
                                  <Checkbox
                                    checked={output?.includes(item.id)}
                                    onCheckedChange={(checked) => {
                                      form.setValue(
                                        "output",
                                        checked
                                          ? [...output, item.id]
                                          : output.filter(
                                              (value) => value !== item.id
                                            )
                                      );
                                    }}
                                  />
                                </FormControl>
                                <FormLabel className="font-normal">
                                  {item.label}
                                </FormLabel>
                              </FormItem>
                            );
                          }}
                        />
                      ))}
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="unit"
                render={() => (
                  <FormItem>
                    <div className="mb-4">
                      <FormLabel className="text-sm">Pelaksana Tugas</FormLabel>
                    </div>
                    <div className="flex flex-row gap-3 items-center ">
                      <div className="flex items-center gap-3">
                        <Checkbox
                          id="all"
                          checked={isAllUnitChecked}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              form.setValue(
                                "unit",
                                units.map((item) => item.id)
                              );
                            } else {
                              form.setValue("unit", []);
                            }
                          }}
                        />
                        <label htmlFor="all" className="text-sm">
                          Semua
                        </label>
                      </div>

                      {units.map((item) => (
                        <FormField
                          key={item.id}
                          control={form.control}
                          name="unit"
                          render={({ field }) => {
                            return (
                              <FormItem
                                key={item.id}
                                className="flex flex-row items-start space-x-3 space-y-0"
                              >
                                <FormControl>
                                  <Checkbox
                                    checked={unit?.includes(item.id)}
                                    disabled={
                                      item.id === "polres" &&
                                      !unit.includes("polda")
                                    }
                                    onCheckedChange={(checked) => {
                                      form.setValue(
                                        "unit",
                                        checked
                                          ? [...unit, item.id]
                                          : unit.filter(
                                              (value) => value !== item.id
                                            )
                                      );
                                    }}
                                  />
                                </FormControl>
                                <FormLabel className="font-normal">
                                  {item.label}
                                </FormLabel>
                              </FormItem>
                            );
                          }}
                        />
                      ))}
                      <Dialog>
                        <DialogTrigger asChild>
                          <a className="text-primary cursor-pointer text-sm">
                            {`[Kustom]`}
                          </a>
                        </DialogTrigger>
                        <DialogContent size="md">
                          <DialogHeader>
                            <DialogTitle>
                              Daftar Wilayah Polda dan Polres
                            </DialogTitle>
                          </DialogHeader>
                          <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
                            {listDest?.map((list: any) => (
                              <div key={list.id}>
                                <Accordion
                                  type="single"
                                  collapsible
                                  className="h-fit border-none"
                                >
                                  <AccordionItem
                                    value={list.name}
                                    className="border-none"
                                  >
                                    <div className="flex items-center space-x-2">
                                      <Checkbox
                                        id={list.id}
                                        name={`all${list.id}`}
                                        checked={
                                          unit.includes("2")
                                            ? true
                                            : !!selected[list.id]
                                        }
                                        onCheckedChange={() =>
                                          handleParentChange(list.id)
                                        }
                                        disabled={unit.includes("2")}
                                      />
                                      <label
                                        htmlFor={list.name}
                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                      >
                                        {list.name}
                                      </label>
                                      <AccordionTrigger className="w-fit bg-transparent"></AccordionTrigger>
                                    </div>
                                    <AccordionContent>
                                      <div className="flex flex-col gap-1">
                                        <div className="flex items-center space-x-2">
                                          <Checkbox
                                            checked={
                                              unit.includes("3")
                                                ? true
                                                : !!selectAll[list.id]
                                            }
                                            onCheckedChange={(e) =>
                                              handleSelectAllPolres(
                                                list.id,
                                                Boolean(e)
                                              )
                                            }
                                            disabled={unit.includes("3")}
                                          />
                                          <label
                                            htmlFor="all-polres"
                                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                          >
                                            Pilih Semua Polres
                                          </label>
                                        </div>
                                        {list.subDestination.map(
                                          (subDes: any) => (
                                            <div
                                              key={subDes.id}
                                              className="flex items-center space-x-2"
                                            >
                                              <Checkbox
                                                id={`${list.id}${subDes.id}`}
                                                checked={
                                                  unit.includes("3")
                                                    ? true
                                                    : !!selected[
                                                        `${list.id}${subDes.id}`
                                                      ]
                                                }
                                                onCheckedChange={() =>
                                                  handleChildChange(
                                                    `${list.id}${subDes.id}`
                                                  )
                                                }
                                                disabled={unit.includes("3")}
                                              />
                                              <label
                                                htmlFor={`${list.id}${subDes.id}`}
                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                              >
                                                {subDes.name}
                                              </label>
                                            </div>
                                          )
                                        )}
                                      </div>
                                    </AccordionContent>
                                  </AccordionItem>
                                </Accordion>
                              </div>
                            ))}
                          </div>
                        </DialogContent>
                      </Dialog>
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="media"
                render={() => (
                  <FormItem>
                    <div className="mb-4">
                      <FormLabel className="text-sm">Jenis Platform</FormLabel>
                    </div>
                    <div className="flex flex-row gap-3 items-center ">
                      <div className="flex items-center gap-3">
                        <Checkbox
                          id="all"
                          checked={isAllMediaChecked}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              form.setValue(
                                "media",
                                medias.map((item) => item.id)
                              );
                            } else {
                              form.setValue("media", []);
                            }
                          }}
                        />
                        <label htmlFor="all" className="text-sm">
                          Semua
                        </label>
                      </div>

                      {medias.map((item) => (
                        <FormField
                          key={item.id}
                          control={form.control}
                          name="output"
                          render={({ field }) => {
                            return (
                              <FormItem
                                key={item.id}
                                className="flex flex-row items-start space-x-3 space-y-0"
                              >
                                <FormControl>
                                  <Checkbox
                                    checked={media?.includes(item.id)}
                                    onCheckedChange={(checked) => {
                                      form.setValue(
                                        "media",
                                        checked
                                          ? [...media, item.id]
                                          : media.filter(
                                              (value) => value !== item.id
                                            )
                                      );
                                    }}
                                  />
                                </FormControl>
                                <FormLabel className="font-normal">
                                  {item.label}
                                </FormLabel>
                              </FormItem>
                            );
                          }}
                        />
                      ))}
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="type"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Jenis Penugasan</FormLabel>
                    <FormControl>
                      <RadioGroup
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                        className="flex flex-row gap-3"
                      >
                        <FormItem className="flex items-center space-x-3 space-y-0">
                          <FormControl>
                            <RadioGroupItem value="1" />
                          </FormControl>
                          <FormLabel className="font-normal">
                            Publikasi
                          </FormLabel>
                        </FormItem>
                        <FormItem className="flex items-center space-x-3 space-y-0">
                          <FormControl>
                            <RadioGroupItem value="2" />
                          </FormControl>
                          <FormLabel className="font-normal">
                            Amplifikasi
                          </FormLabel>
                        </FormItem>
                        <FormItem className="flex items-center space-x-3 space-y-0">
                          <FormControl>
                            <RadioGroupItem value="3" />
                          </FormControl>
                          <FormLabel className="font-normal">Kontra</FormLabel>
                        </FormItem>
                      </RadioGroup>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="parentId"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Perencanaan Mingguan</FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {weeklyList?.map((list: any) => (
                          <SelectItem key={list.id} value={list.value}>
                            {list.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="date"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>Pilih Tanggal</FormLabel>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant={"outline"}
                          className={cn(
                            "w-[280px] justify-start text-left font-normal",
                            !field.value && "text-muted-foreground"
                          )}
                        >
                          <CalendarIcon className="mr-2 h-4 w-4" />
                          {field.value ? (
                            format(field.value, "PPP")
                          ) : (
                            <span>Masukkan Tanggal</span>
                          )}
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0">
                        <Calendar
                          mode="single"
                          selected={field.value}
                          onSelect={field.onChange}
                          initialFocus
                        />
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="detail"
                render={({ field: { onChange, value } }) => (
                  <FormItem>
                    <FormLabel>Detail Perencanaan</FormLabel>
                    <CustomEditor onChange={onChange} initialData={value} />

                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
                <Button type="submit" variant="outline" color="destructive">
                  Cancel
                </Button>
                <Button type="submit" color="primary">
                  Submit
                </Button>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
}