import React from "react";
import useTableColumns from "./useTableColumns";
import DashBody from "../../Layout/Dashboard/DashBody";
import DashHeader from "../../Layout/Dashboard/DashHeader";
import { QueryStatusEnum } from "../../config/QueryStatus";
import LyTable from "../../Layout/Dashboard/LyTable";
import { useTranslation } from "react-i18next";
import { useGetOrder } from "../../api/order";
import SearchField from "../../Layout/Dashboard/SearchField";
// import SearchField from "../../Components/ValidationField/View/SearchField";
const OrderPage = () => {
  const [t] = useTranslation();



  //filters
  const [search, setSearchText] = React.useState("");


  const filterIsApplied = search !== "";
  //Table Content -- Data + Columns
  const { data, isLoading, status } = useGetOrder({ search });

  const totalRows = data?.pagination?.total || 0;

  const columns = useTableColumns();

  return (
    <>
      <DashBody status={status as QueryStatusEnum} >
        <DashHeader title="orders" showAddButton={false}>
          <div className='RightSide d-flex gap-2 align-center '>
            <SearchField searchBy="username" />
          </div>
        </DashHeader>
        <LyTable
          data={data?.Orders}
          total={totalRows}
          column={columns}
          is_pagination={true}


        />
      </DashBody>

    </>
  );
};

export default OrderPage;
