"use client";
import {
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  Input,
  Pagination,
  Select,
  SelectItem,
  SelectSection,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@heroui/react";
import Link from "next/link";
import SidebarNav from "../landing/SidebarNav";
import { ChevronRightIcon, EyeFilledIcon, SearchIcon } from "../icons";
import { getListMagazine } from "@/service/magazine";
import { useEffect, useState } from "react";
import Datepicker from "react-tailwindcss-datepicker";

const header = [
  {
    key: "title",
    label: "Daftar E-Majalah Polri",
  },
  {
    key: "icon",
    label: "",
  },
];

export default function ListEnewsPolri() {
  const searchInput = (
    <Input
      aria-label="Search"
      className="w-full"
      classNames={{
        input: ["w-full", "bg-transparent", "h-[20px]", "!text-black"],
        mainWrapper: ["w-full", "bg-transparent"],
        innerWrapper: ["bg-transparent", "h-[20px]"],
        inputWrapper: [
          "bg-white",
          "dark:bg-white",
          // "!border-2 !border-gray-200",
          "hover:!bg-gray-300",
          "dark:hover:bg-gray-300",
          "group-data-[focused=true]:bg-transparent",
          "dark:group-data-[focused=true]:bg-transaparent",
          "group-data-[focused=false]:bg-transparent",
          "focus-within:!bg-transparent",
          "h-[20px]",
          "dark:focus-within:!bg-gray-100",
          // "border-2",
          // "border-red-500",
        ],
      }}
      labelPlacement="outside"
      placeholder="Search..."
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
      }
      endContent={
        <Button size="sm" className="bg-[#DD8306] font-semibold">
          Cari
        </Button>
      }
      type="search"
    />
  );

  const [magazines, setMagazines] = useState<any>([]);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [totalPage, setTotalPage] = useState(1);

  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });

  useEffect(() => {
    getMagazines();
  }, [page, startDateValue]);

  async function getMagazines() {
    const req = {
      page: page,
      search: search,
      limit: "10",
      startDate:
        startDateValue.startDate === null ? "" : startDateValue.startDate,
      endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
    };

    const response = await getListMagazine(req);
    setMagazines(response?.data?.data);
    setTotalPage(response?.data?.meta?.totalPage);
  }

  return (
    <div className="md:flex ">
      <div className="w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] text-black">
        <div className="p-1 md:py-5 lg:px-36">
          <div className="flex flex-row gap-4 items-end text-black">
            <Link href="/" className=" font-semibold text-lg">
              Beranda
            </Link>
            <ChevronRightIcon />
            <p className=" font-semibold text-lg">E-Majalah Polri</p>
          </div>
          <div className="pt-4 space-y-5 ">
            {/* <div className="font-semibold text-lg border-b-4 border-red-700 leading-loose">
              E-majalah Polri
            </div> */}
            <div className="flex items-end gap-3 flex-col md:flex-row">
              <Input
                aria-label="Search"
                classNames={{
                  input: [
                    "w-full",
                    "bg-transparent",
                    "h-[20px]",
                    "!text-black",
                  ],
                  mainWrapper: ["w-full", "bg-transparent"],
                  innerWrapper: ["bg-transparent", "h-[20px]"],
                  inputWrapper: [
                    "bg-white",
                    "dark:bg-white",
                    "hover:!bg-gray-300",
                    "dark:hover:bg-gray-300",
                    "group-data-[focused=true]:bg-transparent",
                    "dark:group-data-[focused=true]:bg-transaparent",
                    "group-data-[focused=false]:bg-transparent",
                    "focus-within:!bg-transparent",
                    "h-[20px]",
                    "dark:focus-within:!bg-gray-100",
                  ],
                }}
                labelPlacement="outside"
                type="text"
                onChange={(e) => setSearch(e.target.value)}
                startContent={
                  <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
                }
                endContent={
                  <Button
                    size="sm"
                    className="bg-[#DD8306] font-semibold text-white"
                    onPress={getMagazines}
                  >
                    Cari
                  </Button>
                }
              />
              {/* <Select
                label="Sort By"
                size="sm"
                className="w-1/5"
                classNames={{
                  // base: "bg-red-500",
                  // mainWrapper: "border-2 border-red-500",
                  label: "text-black",
                  value: "!text-black",
                  trigger: "bg-white hover:!bg-gray-100",
                  // innerWrapper: "bg-red-500"
                  // selectorIcon: "bg-red-500"
                  // listboxWrapper: "bg-red-500"
                  // listbox: "bg-red-500"
                  popoverContent: "bg-white",
                }}
                listboxProps={{
                  itemClasses: {
                    base: "text-black",
                    wrapper: "!bg-white ",
                  },
                }}
                // onChange={onChangeFilterEnterprising}
              >
                <SelectSection>
                  {category.map((list: any) => (
                    <SelectItem key={list.id}>{list.label}</SelectItem>
                  ))}
                </SelectSection>
              </Select> */}
              <div className="flex flex-col gap-1 w-full md:w-[240px]">
                <p className="font-semibold text-xs md:text-sm">
                  Tanggal Publikasi
                </p>
                <Datepicker
                  value={startDateValue}
                  displayFormat="DD/MM/YYYY"
                  useRange={false}
                  asSingle={true}
                  onChange={(e: any) => setStartDateValue(e)}
                  inputClassName="z-50 w-full text-sm bg-white border-1 border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-black"
                />
              </div>
            </div>
            <div>
              <div className="flex flex-col gap-3">
                <Table
                  color="warning"
                  aria-label="Example static collection table"
                  classNames={{
                    wrapper: "bg-white",
                    base: "font-bold",
                    // th: " border-2 border-red-500 text-xs",
                    td: "font-medium",
                  }}
                >
                  <TableHeader columns={header}>
                    {(column) => (
                      <TableColumn
                        className=" bg-[#DD8306] text-white text-md w-full"
                        key={column.key}
                      >
                        {column.label}
                      </TableColumn>
                    )}
                  </TableHeader>
                  <TableBody items={magazines}>
                    {(item: any) => (
                      <TableRow key={item.id}>
                        <TableCell>
                          <Link href={`/e-majalah-polri/detail/${item.id}`}>
                            {item.title}
                          </Link>
                        </TableCell>
                        <TableCell>
                          <Link href={`/e-majalah-polri/detail/${item.key}`}>
                            <EyeFilledIcon color="#DD8306" />
                          </Link>
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
                <div className="my-2 w-full flex justify-center">
                  <Pagination
                    isCompact
                    showControls
                    showShadow
                    color="primary"
                    classNames={{
                      base: "bg-transparent",
                      wrapper: "bg-transparent",
                    }}
                    page={page}
                    total={totalPage}
                    onChange={(page) => setPage(page)}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="w-auto md:w-1/3 lg:w-[25%] px-2 md:px-4 py-2 text-black">
        <SidebarNav />
      </div>
    </div>
  );
}