"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import {
  getCategoryDetail,
  getUserRoles,
  postCategory,
} from "@/service/settings/settings";
import { Fragment, useEffect, useState } from "react";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Textarea } from "@/components/ui/textarea";
import { close, error, loading } from "@/config/swal";
import { UnitMapping } from "./unit-mapping";
import { useDropzone } from "react-dropzone";
import { CloudUpload } from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
const FormSchema = z.object({
  title: z.string({
    required_error: "Required",
  }),
  description: z.string({
    required_error: "Required",
  }),
  contentType: z
    .array(z.string())
    .refine((value) => value.some((item) => item), {
      message: "Required",
    }),
  selectedUser: z
    .array(z.string())
    .refine((value) => value.some((item) => item), {
      message: "Required",
    }),
  publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
    message: "Required",
  }),

  id: z.string({
    required_error: "Required",
  }),
  file: z.string().optional(),
});

const listContent = [
  {
    id: "1",
    name: "Foto",
  },
  {
    id: "2",
    name: "Audio Visual",
  },
  {
    id: "3",
    name: "Teks",
  },
  {
    id: "4",
    name: "Audio",
  },
];

const publishToList = [
  {
    id: "mabes",
    name: "Nasional",
  },
  {
    id: "polda",
    name: "Polda",
  },
  {
    id: "satker",
    name: "Satker",
  },
  {
    id: "internasional",
    name: "Internasional",
  },
];

export default function EditCategoryModal(props: {
  id: string;
  thumbnailLink: string;
  isDetail?: boolean;
}) {
  const { id, isDetail, thumbnailLink } = props;
  const [files, setFiles] = useState<File[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const { toast } = useToast();

  const router = useRouter();
  const [satkerData, setSatkerData] = useState<string[]>([]);
  const [unitData, setUnitData] = useState<string[]>([]);
  const [userList, setUserList] = useState<
    { id: string; name: string; isInternal: boolean }[]
  >([]);

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: { contentType: [], selectedUser: [], publishTo: [] },
  });

  const { getRootProps, getInputProps } = useDropzone({
    onDrop: (acceptedFiles) => {
      setFiles(acceptedFiles.map((file) => Object.assign(file)));
    },
    maxFiles: 1,
  });

  useEffect(() => {
    const initFetch = async () => {
      const req = await getCategoryDetail(id);
      const data = req?.data?.data;
      console.log("dataC", data);
      form.setValue("id", String(data?.id));
      form.setValue("title", String(data?.name));
      form.setValue("description", String(data?.description));
      form.setValue("contentType", data?.mediaTypes?.split(","));
      form.setValue(
        "selectedUser",
        removeAndReturn(data?.publishedFor, [2, 3, 4])
      );
      form.setValue("publishTo", data?.publishedLocation?.split(","));
      form.setValue("file", thumbnailLink);

      setUnitData(filterString(data?.publishedLocationLevel, "under"));
      setSatkerData(filterString(data?.publishedLocationLevel, "above"));
    };

    initFetch();
  }, [id]);

  function removeAndReturn(inputString: string, toRemove: number[]) {
    const numbers = inputString.split(",").map(Number);

    const filteredNumbers = numbers.filter((num) => !toRemove.includes(num));

    return filteredNumbers.map(String);
  }

  function filterString(inputString: string, type: string) {
    const numbers = inputString?.split(",").map(Number);
    if (type === "above") {
      const above700 = numbers?.filter((num) => num > 700);

      return above700?.map(String);
    } else {
      const under700 = numbers?.filter((num) => num < 700);

      return under700?.map(String);
    }
  }

  const contentType = form.watch("contentType");
  const isAllContentChecked = listContent.every((item) =>
    contentType?.includes(item.id)
  );

  const users = form.watch("selectedUser");
  const isAllUserChecked = userList.every((item) => users?.includes(item.id));

  const target = form.watch("publishTo");
  const isAllTargetChecked = publishToList.every((item) =>
    target?.includes(item.id)
  );

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

  async function getRoles() {
    const response = await getUserRoles();
    let dataRoles = response?.data?.data;
    for (let i = 0; i < dataRoles.length; i++) {
      dataRoles[i].id = String(dataRoles[i].id);
    }
    setUserList(dataRoles);
  }

  function removeDuplicates(inputString: string): string {
    const numbers = inputString.split(",");
    const uniqueNumbers = Array.from(new Set(numbers));
    return uniqueNumbers.join(",");
  }
  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
    const formMedia = new FormData();

    loading();
    const unit = unitData?.join(",");
    const satker = satkerData?.join(",");
    const join =
      unitData?.length > 0 && satkerData?.length > 0
        ? unit + "," + satker
        : unitData?.length > 0
        ? unit
        : satkerData?.length > 0
        ? satker
        : "";

    formMedia.append("id", data.id);
    formMedia.append("name", data.title);
    formMedia.append("description", data.description);
    formMedia.append("mediaTypes", data.contentType.join(","));
    formMedia.append("publishedFor", data.selectedUser.join(","));
    formMedia.append("publishedLocation", data.publishTo.sort().join(","));
    formMedia.append("publishedLocationLevel", removeDuplicates(join));
    if (files?.length > 0) {
      formMedia.append("file", files[0]);
    }

    const response = await postCategory(formMedia);
    close();
    if (response?.error == true) {
      error(response.message);
      return false;
    }
    toast({
      title: "Succes",
      description: "Kategori berhasil diubah",
    });
    router.push("/admin/settings/category?dataChange=true");
    setIsOpen(false);
  };

  const handleRemoveFile = (file: File) => {
    const uploadedFiles = files;
    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
    setFiles([...filtered]);
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger>
        <a
          onClick={() => setIsOpen(true)}
          className="hover:underline cursor-pointer"
        >
          {isDetail ? "Detail" : "Edit"}
        </a>
      </DialogTrigger>
      <DialogContent size="md">
        <DialogHeader>
          <DialogTitle>Edit Kategori</DialogTitle>
        </DialogHeader>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-3 bg-white rounded-sm"
          >
            <FormField
              control={form.control}
              name="contentType"
              render={() => (
                <FormItem>
                  <FormLabel>Tipe Konten</FormLabel>

                  <div className="flex flex-row items-center gap-2">
                    <div className="flex items-center gap-3">
                      <Checkbox
                        id="all"
                        checked={isAllContentChecked}
                        disabled={isDetail}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            form.setValue(
                              "contentType",
                              listContent.map((item) => item.id)
                            );
                          } else {
                            form.setValue("contentType", []);
                          }
                        }}
                      />
                      <label htmlFor="all" className="text-sm">
                        Semua
                      </label>
                    </div>
                    {listContent.map((item) => (
                      <FormField
                        key={item.id}
                        control={form.control}
                        name="contentType"
                        render={({ field }) => {
                          return (
                            <FormItem
                              key={item.id}
                              className="flex flex-row items-start"
                            >
                              <div className="flex items-center gap-3">
                                <FormControl>
                                  <Checkbox
                                    disabled={isDetail}
                                    checked={field.value?.includes(item.id)}
                                    onCheckedChange={(checked) => {
                                      return checked
                                        ? field.onChange([
                                            ...field.value,
                                            item.id,
                                          ])
                                        : field.onChange(
                                            field.value?.filter(
                                              (value) => value !== item.id
                                            )
                                          );
                                    }}
                                  />
                                </FormControl>
                                <FormLabel className="font-normal">
                                  {item.name}
                                </FormLabel>
                              </div>
                            </FormItem>
                          );
                        }}
                      />
                    ))}
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="selectedUser"
              render={() => (
                <FormItem>
                  <FormLabel>Target Publish</FormLabel>

                  <div className="flex flex-row items-center gap-2">
                    <div className="flex gap-3 items-center">
                      <Checkbox
                        id="all"
                        disabled={isDetail}
                        checked={isAllUserChecked}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            form.setValue(
                              "selectedUser",
                              userList.map((item) => item.id)
                            );
                          } else {
                            form.setValue("selectedUser", []);
                          }
                        }}
                      />
                      <label htmlFor="all" className="text-sm">
                        Semua
                      </label>
                    </div>
                    {userList.map((item) => (
                      <FormField
                        key={item.id}
                        control={form.control}
                        name="selectedUser"
                        render={({ field }) => {
                          return (
                            <FormItem
                              key={item.id}
                              className="flex flex-row items-start "
                            >
                              <div className="flex items-center gap-3">
                                <FormControl>
                                  <Checkbox
                                    disabled={isDetail}
                                    checked={field.value?.includes(item.id)}
                                    onCheckedChange={(checked) => {
                                      return checked
                                        ? field.onChange([
                                            ...field.value,
                                            item.id,
                                          ])
                                        : field.onChange(
                                            field.value?.filter(
                                              (value) => value !== item.id
                                            )
                                          );
                                    }}
                                  />
                                </FormControl>
                                <FormLabel className="font-normal">
                                  {item.name}
                                </FormLabel>
                              </div>
                            </FormItem>
                          );
                        }}
                      />
                    ))}
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="publishTo"
              render={() => (
                <FormItem>
                  <FormLabel>Wilayah Publish</FormLabel>

                  <div className="flex flex-row items-center gap-2">
                    <div className="flex gap-3 items-center">
                      <Checkbox
                        id="all"
                        checked={isAllTargetChecked}
                        disabled={isDetail}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            form.setValue(
                              "publishTo",
                              publishToList.map((item) => item.id)
                            );
                          } else {
                            form.setValue("publishTo", []);
                          }
                        }}
                      />
                      <label htmlFor="all" className="text-sm">
                        Semua
                      </label>
                    </div>
                    {publishToList.map((item) => (
                      <>
                        <FormField
                          key={item.id}
                          control={form.control}
                          name="publishTo"
                          render={({ field }) => {
                            return (
                              <FormItem
                                key={item.id}
                                className="flex flex-row items-start "
                              >
                                <div className="flex items-center gap-3">
                                  <FormControl>
                                    <Checkbox
                                      disabled={isDetail}
                                      checked={field.value?.includes(item.id)}
                                      onCheckedChange={(checked) => {
                                        return checked
                                          ? field.onChange([
                                              ...field.value,
                                              item.id,
                                            ])
                                          : field.onChange(
                                              field.value?.filter(
                                                (value) => value !== item.id
                                              )
                                            );
                                      }}
                                    />
                                  </FormControl>
                                  <FormLabel className="font-normal">
                                    {item.name}{" "}
                                  </FormLabel>
                                </div>
                              </FormItem>
                            );
                          }}
                        />
                        {item.id === "polda" &&
                          form.getValues("publishTo")?.includes(item.id) && (
                            <UnitMapping
                              unit="Polda"
                              sendDataToParent={(data) => setUnitData(data)}
                              isDetail={isDetail ? true : false}
                              initData={unitData}
                            />
                          )}
                        {item.id === "satker" &&
                          form.getValues("publishTo")?.includes(item.id) && (
                            <UnitMapping
                              unit="Satker"
                              sendDataToParent={(data) => setSatkerData(data)}
                              isDetail={isDetail ? true : false}
                              initData={satkerData}
                            />
                          )}
                      </>
                    ))}
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nama Kategori</FormLabel>
                  <Input
                    value={field.value}
                    readOnly={isDetail}
                    placeholder="Masukkan Nama Kategori"
                    onChange={field.onChange}
                  />

                  <FormMessage />
                </FormItem>
              )}
            />
            {isDetail ? (
              <div className="flex flex-row gap-2">
                <img src={thumbnailLink} className="w-[30%]" alt="thumbnail" />
              </div>
            ) : (
              <FormField
                control={form.control}
                name="file"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Thumbnail Category</FormLabel>
                    {files.length < 1 && field.value === "" && (
                      <Fragment>
                        <div {...getRootProps({ className: "dropzone" })}>
                          <input {...getInputProps()} />
                          <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
                            <CloudUpload className="text-default-300 w-10 h-10" />
                            <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                              Tarik file disini atau klik untuk upload.
                            </h4>
                            <div className=" text-xs text-muted-foreground">
                              ( Upload file dengan format .jpg, .jpeg, atau
                              .png. Ukuran maksimal 100mb.)
                            </div>
                          </div>
                        </div>
                      </Fragment>
                    )}
                    {field.value !== "" && (
                      <div className="flex flex-row gap-2">
                        <img
                          src={field.value}
                          className="w-[30%]"
                          alt="thumbnail"
                        />
                        <a
                          onClick={() => form.setValue("file", "")}
                          className="cursor-pointer"
                        >
                          <Icon icon="fa-solid:times" color="red" />
                        </a>
                      </div>
                    )}

                    {files.length > 0 && (
                      <div className="flex flex-row gap-2">
                        <img
                          src={URL.createObjectURL(files[0])}
                          className="w-[30%]"
                          alt="thumbnail"
                        />
                        <a
                          onClick={() => handleRemoveFile(files[0])}
                          className="cursor-pointer"
                        >
                          <Icon icon="fa-solid:times" color="red" />
                        </a>
                      </div>
                    )}

                    <FormMessage />
                  </FormItem>
                )}
              />
            )}

            <FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Deskripsi</FormLabel>
                  <FormControl>
                    <Textarea
                      readOnly={isDetail}
                      placeholder="Deskripsi"
                      //   className="resize-none"
                      {...field}
                    />
                  </FormControl>

                  <FormMessage />
                </FormItem>
              )}
            />
            {!isDetail && (
              <DialogFooter>
                <Button
                  type="submit"
                  color="primary"
                  size="md"
                  className="text-xs"
                >
                  Edit Kategori
                </Button>
              </DialogFooter>
            )}
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}
