import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { A as Authenticated } from "./AuthenticatedLayout-e9a3f939.js";
import "./TextInput-1224a4d9.js";
import { Head } from "@inertiajs/react";
/* empty css                           */import Swal from "sweetalert2";
import { L as LoadingSpinner } from "./LoadingSpinner-1e6a98f0.js";
import "browser-image-compression";
import "react-table";
import { FaEdit, FaTrash, FaEye } from "react-icons/fa/index.esm.js";
import { MaterialReactTable } from "material-react-table";
import "./ApplicationLogo-f1b6bb25.js";
import "@headlessui/react";
import "react-loader-spinner";
const OrdersComponents = ({ orderData }) => {
  const [currentStatus, setCurrentStatus] = useState("New");
  const [isLoading, setIsLoading] = useState(false);
  const getImageMimeType = (imageData) => {
    if (imageData.startsWith("/9j/")) {
      return "image/jpeg";
    } else if (imageData.startsWith("iVBORw0KG")) {
      return "image/png";
    } else if (imageData.startsWith("R0lGODlh")) {
      return "image/gif";
    }
    return "image/jpeg";
  };
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  };
  const newProducts = orderData.filter((product) => product.Status === "New");
  const onGoingProducts = orderData.filter((product) => product.Status === "OnGoing");
  const finishedProducts = orderData.filter((product) => product.Status === "Finished");
  const columns = [
    {
      accessorKey: "edit",
      header: "Edit",
      enableColumnFilter: false,
      Cell: ({ row }) => row.original.Status === "New" ? /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("button", { onClick: () => handleEdit(row.original), children: /* @__PURE__ */ jsx(FaEdit, { className: "mr-10 text-blue-500 hover:text-green-600 text-lg hover:text-xl cursor-pointer" }) }),
        /* @__PURE__ */ jsxs("button", { onClick: () => handleDel(row.original), children: [
          " ",
          /* @__PURE__ */ jsx(FaTrash, { className: "text-blue-500 hover:text-red-600 text-lg hover:text-xl cursor-pointer" })
        ] })
      ] }) : /* @__PURE__ */ jsx("button", { onClick: () => handleEdit(row.original), children: /* @__PURE__ */ jsx(FaEye, { className: "mr-10 text-blue-500 hover:text-green-600 text-lg hover:text-xl cursor-pointer" }) })
      /* Cell: ({ row }) => (
          (row.original.Status === 'New') ?
              <><button onClick={() => handleEdit(row.original)}><FaEdit className="mr-10 text-blue-500 hover:text-green-600 text-lg hover:text-xl cursor-pointer" /></button><button onClick={() => handleDel(row.original)}> <FaTrash className="text-blue-500 hover:text-red-600 text-lg hover:text-xl cursor-pointer" /></button></> : ''
      ), */
    },
    {
      accessorKey: "image",
      header: "Image",
      enableColumnFilter: false,
      Cell: ({ row }) => /* @__PURE__ */ jsx(
        "img",
        {
          className: "rounded orderImg",
          src: `data:${getImageMimeType(row.original.Image)};base64,${row.original.Image}`,
          alt: "Product Image",
          width: 500,
          height: 500
        }
      )
    },
    {
      accessorKey: "ID",
      header: "Order Number",
      filterVariant: "text",
      // Use custom filter component
      size: 100
    },
    {
      accessorKey: "Deadline_Date",
      header: "Deadline Date",
      Cell: ({ cell }) => formatDate(cell.getValue())
    },
    {
      accessorKey: "Category",
      header: "Category",
      filterVariant: "text",
      size: 100
    },
    {
      accessorKey: "Description",
      header: "Description",
      filterVariant: "text",
      // Use custom filter component
      size: 100
    },
    /* {
        accessorKey: 'Status',
        header: 'Status',
        filterVariant: 'text', // Use custom filter component
        size: 100,
    }, */
    {
      accessorKey: "Remarks",
      header: "Remarks",
      filterVariant: "text",
      // Use custom filter component
      size: 100
    }
  ];
  const handleEdit = (prod) => {
    const url = `/order/${prod.ID}`;
    window.location.replace(url);
  };
  const handleDel = async (prod) => {
    setIsLoading(true);
    const url = `/api/order/del/${prod.ID}`;
    try {
      fetch(url, {
        method: "POST"
      }).then((data2) => {
        if (data2.status) {
          setIsLoading(false);
          Swal.fire({
            title: "Success!",
            text: "Order data Updated successfully.",
            icon: "success",
            confirmButtonText: "OK"
          }).then((result) => {
            if (result.isConfirmed) {
              const url2 = `/orders`;
              window.location.replace(url2);
            }
          });
        }
      }).catch((error) => {
        console.error(error);
        setIsLoading(false);
      });
    } catch (error) {
      console.error(error);
    }
  };
  const data = {
    New: newProducts,
    OnGoing: onGoingProducts,
    Finished: finishedProducts
  };
  return /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs("div", { className: "flex space-x-4 mb-4", children: [
      /* @__PURE__ */ jsx(
        "button",
        {
          className: `px-4 py-2 rounded-lg ${currentStatus === "New" ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-600"} hover:bg-blue-600 hover:text-white`,
          onClick: () => setCurrentStatus("New"),
          children: "New Orders"
        }
      ),
      /* @__PURE__ */ jsx(
        "button",
        {
          className: `px-4 py-2 rounded-lg ${currentStatus === "OnGoing" ? "bg-green-500 text-white" : "bg-gray-200 text-gray-600"} hover:bg-green-600 hover:text-white`,
          onClick: () => setCurrentStatus("OnGoing"),
          children: "OnGoing Orders"
        }
      ),
      /* @__PURE__ */ jsx(
        "button",
        {
          className: `px-4 py-2 rounded-lg ${currentStatus === "Finished" ? "bg-yellow-500 text-white" : "bg-gray-200 text-gray-600"} hover:bg-yellow-600 hover:text-white`,
          onClick: () => setCurrentStatus("Finished"),
          children: "Finished Orders"
        }
      )
    ] }),
    /* @__PURE__ */ jsx(
      MaterialReactTable,
      {
        columns,
        data: data[currentStatus],
        initialState: {
          density: "compact",
          //set default density to compact
          expanded: true,
          //expand all rows by default
          pagination: { pageIndex: 0, pageSize: 10 },
          //set different default page size
          showColumnFilters: true
          //show filters by default
          //sorting: [{ id: 'name', desc: false }], //sort by name ascending by default
        },
        enableColumnActions: false,
        enableColumnFilters: true,
        enablePagination: true,
        enableSorting: true,
        enableBottomToolbar: true,
        enableTopToolbar: false,
        muiTableBodyRowProps: { hover: true }
      }
    )
  ] });
};
const OrdersComponents$1 = OrdersComponents;
function OrderTable({ auth, status }) {
  const user = auth.user;
  const [isLoading, setIsLoading] = useState(true);
  const [products, setProduct] = useState([]);
  const fetchProducts = async () => {
    try {
      setIsLoading(true);
      fetch("/api/product-get/" + user.Client_ID, {
        method: "GET"
      }).then((response) => response.json()).then((result) => {
        setIsLoading(false);
        console.log(result.products);
        setProduct(result.products);
      }).catch((error) => {
        setIsLoading(false);
        console.error(error);
      });
    } catch (error) {
      setIsLoading(false);
      console.error(error);
    }
  };
  useEffect(() => {
    fetchProducts();
  }, []);
  return /* @__PURE__ */ jsxs(
    Authenticated,
    {
      user,
      header: /* @__PURE__ */ jsx("h2", { className: "font-semibold text-xl text-gray-800 leading-tight", children: "Order Lists" }),
      children: [
        /* @__PURE__ */ jsx(Head, { title: "Products" }),
        /* @__PURE__ */ jsx("div", { className: "py-12", children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6 pb-5", children: isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : /* @__PURE__ */ jsx(OrdersComponents$1, { orderData: products }) }) })
      ]
    }
  );
}
export {
  OrderTable as default
};
