"use client";

import React, { useEffect, useState } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Icon } from "@iconify/react/dist/iconify.js";
import { getOnlyDate, getOnlyMonthAndYear } from "@/utils/globals";
import { useParams, usePathname, useSearchParams } from "next/navigation";
import { getUserLevelListByParent, listCategory, listData, listDataAll, listDataRegional } from "@/service/landing/landing";
import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
import { Reveal } from "@/components/landing-page/Reveal";
import { Link, useRouter } from "@/i18n/routing";
import { Input } from "@/components/ui/input";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import FilterImageComponent from "@/components/landing-page/filter-all/image-filter-card";
import FilterVideoComponent from "@/components/landing-page/filter-all/video-filter-card";
import FilterDocumentComponent from "@/components/landing-page/filter-all/document-filter-card";
import FilterAudioComponent from "@/components/landing-page/filter-all/audio-filter-card";

export default function FilterPage() {
  const router = useRouter();
  const asPath = usePathname();
  const params = useParams();
  const searchParams = useSearchParams();
  const locale = params?.locale;
  const [imageData, setImageData] = useState<any>();
  const [totalData, setTotalData] = React.useState<number>(1);
  const [totalPage, setTotalPage] = React.useState<number>(1);
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
  const [rowSelection, setRowSelection] = React.useState({});
  const [pagination, setPagination] = React.useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [page, setPage] = useState(1);
  const [totalContent, setTotalContent] = useState();
  const [change, setChange] = useState(false);
  const sortBy = searchParams?.get("sortBy");
  const title = searchParams?.get("title");
  const categorie = searchParams?.get("category");
  const group = searchParams?.get("group");
  const tag: any = searchParams?.get("tag");
  const [contentImage, setContentImage] = useState([]);
  const [, setGetTotalPage] = useState();
  let typingTimer: any;
  const doneTypingInterval = 1500;
  const [search, setSearch] = useState();
  const [categoryFilter, setCategoryFilter] = useState<any>([]);
  const [monthYearFilter, setMonthYearFilter] = useState<any>();
  const [searchTitle, setSearchTitle] = useState<string>("");
  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
  const isRegional = asPath?.includes("regional");
  const isSatker = asPath?.includes("satker");
  const [formatFilter, setFormatFilter] = useState<any>([]);
  const pages = page ? page - 1 : 0;
  const [startDateString, setStartDateString] = useState<any>();
  const [endDateString, setEndDateString] = useState<any>();
  const [dateRange, setDateRange] = useState<any>([null, null]);
  const [calenderState, setCalenderState] = useState(false);
  const [handleClose, setHandleClose] = useState(false);
  const [categories, setCategories] = useState([]);
  const [userLevels, setUserLevels] = useState([]);
  const [contentAll, setContentAll] = useState([]);

  // const [startDate, endDate] = dateRange;

  React.useEffect(() => {
    const pageFromUrl = searchParams?.get("page");
    if (pageFromUrl) {
      setPage(Number(pageFromUrl));
    }
  }, [searchParams]);

  useEffect(() => {
    async function initState() {
      getCategories();
      // getSelectedCategory();
      if (isSatker) {
        getUserLevels();
      }
    }

    initState();
  }, []);

  useEffect(() => {
    if (categorie) {
      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
    }
  }, [categorie]);

  // useEffect(() => {
  //   fetchData();
  // }, [page, sortBy, sortByOpt, title]);

  useEffect(() => {
    async function initState() {
      if (isRegional) {
        getDataRegional();
      } else {
        getData();
      }
    }
    console.log(monthYearFilter, "monthFilter");
    initState();
  }, [change, monthYearFilter, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);

  async function getCategories() {
    const category = await listCategory("1");
    const resCategory = category?.data?.data?.content;
    setCategories(resCategory);
  }

  useEffect(() => {
    function initState() {
      if (dateRange[0] != null && dateRange[1] != null) {
        setStartDateString(getOnlyDate(dateRange[0]));
        setEndDateString(getOnlyDate(dateRange[1]));
        setHandleClose(true);
        console.log("date range", dateRange, getOnlyDate(dateRange[0]));
      }
    }
    initState();
  }, [calenderState]);

  async function getData() {
    if (asPath?.includes("/polda/") == true) {
      if (asPath?.split("/")[2] !== "[polda_name]") {
        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";

        const name = title == undefined ? "" : title;
        const format = formatFilter == undefined ? "" : formatFilter?.join(",");
        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
        loading();
        const response = await listDataAll(
          "",
          name,
          filter,
          "",
          tag,
          filterGroup,
          startDateString,
          endDateString,
          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "",
          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
        );
        close();
        // setGetTotalPage(response?.data?.data?.totalPages);
        // setContentImage(response?.data?.data?.content);
        // setTotalContent(response?.data?.data?.totalElements);
        const data = response?.data?.data;
        const contentData = data?.content;
        setImageData(contentData);
        setTotalData(data?.totalElements);
        setContentAll(response?.data?.data?.content);
        setTotalPage(data?.totalPages);
        setTotalContent(response?.data?.data?.totalElements);
      }
    } else {
      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";

      const name = title == undefined ? "" : title;
      const format = formatFilter == undefined ? "" : formatFilter?.join(",");
      loading();
      const response = await listDataAll(
        "",
        name,
        filter,
        "",
        "",
        tag,
        startDateString,
        endDateString,
        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "") : "",
        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
      );
      close();
      // setGetTotalPage(response?.data?.data?.totalPages);
      // setContentImage(response?.data?.data?.content);
      // setTotalContent(response?.data?.data?.totalElements);
      const data = response?.data?.data;
      const contentData = data?.content;
      setImageData(contentData);
      setTotalData(data?.totalElements);
      setContentAll(response?.data?.data?.content);
      setTotalPage(data?.totalPages);
      setTotalContent(response?.data?.data?.totalElements);
    }
  }

  const handleCategoryFilter = (e: boolean, id: string) => {
    let filter = [...categoryFilter];

    if (e) {
      filter = [...categoryFilter, String(id)];
    } else {
      filter.splice(categoryFilter.indexOf(id), 1);
    }
    console.log("checkbox filter", filter);
    setCategoryFilter(filter);
    router.push(`?category=${filter.join("&")}`);
  };

  const handleFormatFilter = (e: boolean, id: string) => {
    let filter = [...formatFilter];

    if (e) {
      filter = [...formatFilter, id];
    } else {
      filter.splice(formatFilter.indexOf(id), 1);
    }
    console.log("Format filter", filter);
    setFormatFilter(filter);
  };

  const cleanCheckbox = () => {
    setCategoryFilter([]);
    setFormatFilter([]);
    router.push(`?category=&title=`);
    setDateRange([null, null]);
    setMonthYearFilter(null);
    setChange(!change);
  };

  async function getDataRegional() {
    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";

    const name = title == undefined ? "" : title;
    const format = formatFilter == undefined ? "" : formatFilter?.join(",");
    loading();
    const response = await listDataRegional(
      "",
      name,
      filter,
      format,
      "",
      startDateString,
      endDateString,
      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
      12,
      pages,
      sortByOpt
    );
    close();

    setGetTotalPage(response?.data?.data?.totalPages);
    setContentImage(response?.data?.data?.content);
    setTotalContent(response?.data?.data?.totalElements);
  }

  function getSelectedCategory() {
    const filter = [];

    if (categorie) {
      const categoryArr = categorie.split(",");

      for (const element of categoryArr) {
        filter.push(Number(element));
      }

      setCategoryFilter(filter);
    }
  }

  const handleDeleteDate = () => {
    setDateRange([null, null]);
    setStartDateString("");
    setEndDateString("");
    setHandleClose(false);
  };

  const handleSorting = (e: any) => {
    console.log(e.target.value);
    if (e.target.value == "terbaru") {
      setSortByOpt("createdAt");
    } else {
      setSortByOpt("clickCount");
    }

    setChange(!change);
  };

  async function getUserLevels() {
    const res = await getUserLevelListByParent(761);
    const userLevelList = res?.data?.data;

    if (userLevelList !== null) {
      let optionArr: any = [];

      userLevelList?.map((option: any) => {
        let optionData = {
          id: option.id,
          label: option.name,
          value: option.id,
        };

        optionArr.push(optionData);
      });

      setUserLevels(optionArr);
    }
  }

  const handleKeyUp = () => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
  };

  async function doneTyping() {
    if (searchTitle == "" || searchTitle == undefined) {
      router.push("?title=");
    } else {
      router.push(`?title=${searchTitle}`);
    }
  }

  const handleKeyDown = () => {
    clearTimeout(typingTimer);
  };

  return (
    <div className="flex flex-col">
      {/* Header */}

      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
        <p>
          {" "}
          Konten {">"} <span className="font-bold">Semua Konten</span>
        </p>
        <p className="font-bold">|</p>
        <p>{`Hasil Pencarian ${title} `}</p>
        {`Terdapat ${contentAll?.length} konten yang dapat diunduh`}
      </div>

      {/* Left */}
      <div className="flex flex-col lg:flex-row gap-6 p-4">
        <div className="lg:w-[25%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
          <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
            <Icon icon="stash:filter-light" fontSize={30} />
            Filter
          </h2>
          <div className="border-t border-black my-4 dark:border-white"></div>
          <div className="space-y-6">
            <div>
              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
                Pencarian
              </label>
              <Input
                value={searchTitle}
                onChange={(e) => setSearchTitle(e.target.value)}
                onKeyUp={handleKeyUp}
                onKeyDown={handleKeyDown}
                type="text"
                id="search"
                placeholder="Cari judul..."
                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tahun & Bulan</label>
              <ReactDatePicker
                selected={monthYearFilter}
                className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                onChange={(date) => setMonthYearFilter(date)}
                dateFormat="MM | yyyy"
                placeholderText="Pilih Tahun dan Bulan"
                showMonthYearPicker
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-white">Tanggal</label>
              <div className="flex flex-row justify justify-between gap-2">
                <ReactDatePicker
                  selectsRange
                  className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
                  startDate={dateRange[0]}
                  endDate={dateRange[1]}
                  onChange={(update) => {
                    setDateRange(update);
                  }}
                  placeholderText="Pilih Tanggal"
                  onCalendarClose={() => setCalenderState(!calenderState)}
                />
                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
              </div>
            </div>

            <div>
              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
              <ul className="mt-2 space-y-2">
                {categories.map((category: any) => (
                  <li key={category?.id}>
                    <label className="inline-flex items-center" htmlFor={`${category.id}`}>
                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
                      <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                    </label>
                  </li>
                ))}
              </ul>
            </div>
            {/* Garis */}
            <div className="border-t border-black my-4 dark:border-white"></div>
            {/* Garis */}
            <div>
              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Konten</h3>
              <ul className="mt-2 space-y-2">
                <li>
                  <label className="inline-flex items-center">
                    <Checkbox id="png" value="png" checked={formatFilter.includes("image")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "image")} />
                    <span className="ml-2 text-gray-700 dark:text-white">Foto</span>
                  </label>
                </li>
                <li>
                  <label className="inline-flex items-center">
                    <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("video")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "video")} />
                    <span className="ml-2 text-gray-700 dark:text-white">Audio Visual</span>
                  </label>
                </li>
                <li>
                  <label className="inline-flex items-center">
                    <Checkbox id="jpg" value="jpg" checked={formatFilter.includes("document")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "document")} />
                    <span className="ml-2 text-gray-700 dark:text-white">Teks</span>
                  </label>
                </li>
                <li>
                  <label className="inline-flex items-center">
                    <Checkbox id="jpg" value="jpg" checked={formatFilter.includes("audio")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "audio")} />
                    <span className="ml-2 text-gray-700 dark:text-white">Audio</span>
                  </label>
                </li>
              </ul>
            </div>
            <div className="border-t border-black dark:border-white my-4"></div>
            <div className="text-center">
              <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
                <b>Reset Filter</b>
              </a>
            </div>
          </div>
        </div>

        {/* Konten Kanan */}
        <div className="flex-1 w-[75%]">
          <div className="flex flex-col items-end mb-4">
            <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
            <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
              <option value="terbaru">Terbaru</option>
              <option value="terpopuler">Terpopuler</option>
            </select>
          </div>
          <div className="flex flex-col gap-2 w-full">
            <FilterImageComponent categoryFilter={categoryFilter} sortByOpt={sortByOpt} startDateString={startDateString} endDateString={endDateString} monthYearFilter={monthYearFilter} />
            <FilterVideoComponent categoryFilter={categoryFilter} sortByOpt={sortByOpt} startDateString={startDateString} endDateString={endDateString} monthYearFilter={monthYearFilter} />
            <FilterDocumentComponent categoryFilter={categoryFilter} sortByOpt={sortByOpt} startDateString={startDateString} endDateString={endDateString} monthYearFilter={monthYearFilter} />
            <FilterAudioComponent categoryFilter={categoryFilter} sortByOpt={sortByOpt} startDateString={startDateString} endDateString={endDateString} monthYearFilter={monthYearFilter} />
          </div>
        </div>
      </div>
    </div>
  );
}
