"use client";
import {
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  Input,
  Select,
  SelectItem,
  SelectSection,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@nextui-org/react";
import Link from "next/link";
import SidebarNav from "../landing/SidebarNav";
import { EyeFilledIcon, SearchIcon } from "../icons";

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 tableData = [
    {
      key: "1",
      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
      icon: <EyeFilledIcon color="#DD8306" />,
    },
    {
      key: "2",
      tahun: "Tribrata Edisi 1 2023",
      icon: <EyeFilledIcon color="#DD8306" />,
    },
    {
      key: "3",
      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
      icon: <EyeFilledIcon color="#DD8306" />,
    },
    {
      key: "4",
      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
      icon: <EyeFilledIcon color="#DD8306" />,
    },
    {
      key: "5",
      tahun: "MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023",
      icon: <EyeFilledIcon color="#DD8306" />,
    },
  ];

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

  const category = [
    { label: "Title", value: "title" },
    { label: "Date", value: "date" },
    { label: "Created At", value: "createdAt" },
  ];
  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:p-5 lg:p-8">
          <div className="font-bold text-xl">E-Majalah Polri</div>
          <div className="pt-2">
            <Breadcrumbs color="primary">
              <BreadcrumbItem href="/">Beranda</BreadcrumbItem>
              <BreadcrumbItem>E-Majalah Polri</BreadcrumbItem>
            </Breadcrumbs>
          </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-center gap-3">
              {searchInput}
              <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>
              <Select
                label="Tanggal Publikasi"
                size="sm"
                className="w-1/4"
                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>
            <div>
              <div className="flex flex-col gap-3">
                <Table
                  color="warning"
                  selectionMode="single"
                  defaultSelectedKeys={["1"]}
                  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={tableData}>
                    {(item) => (
                      <TableRow key={item.key}>
                        <TableCell>{item.tahun}</TableCell>
                        <TableCell>
                          <Link href={`/e-majalah-polri/detail/${item.key}`}>
                            {item.icon}
                          </Link>
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </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>
  );
}