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 { useGetOrder } from "../../api/order";
import SelectField from "./ui/CustomSelectField";
import { useGetCoupon } from "../../api/Coupon";
import SelectWSearchField from "./ui/CustomSelectWSearchField";
// import SearchField from "../../Components/ValidationField/View/SearchField";
import CustomDateRange from "./ui/CustomDateRange";
import { FaCheck, FaTimes, FaClock, FaBan } from 'react-icons/fa';
import { Button } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import { useOrderFillterState } from "../../zustand/OrderFillter";
import CustomSearchField from "./ui/CustomSearchField";
import CustomNumber from "./ui/CustomNumber";

const OrderPage = () => {

  const { data, status } = useGetOrder();

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

  const columns = useTableColumns();

  /// Coupon status Created from -> to  Price from => to
  const stateSelect = [
    { label: <div className='orderStatus_select'><FaClock /> Pending Approve</div>, value: "pending_approve" },
    { label: <div className='orderStatus_select'><FaCheck /> Approved</div>, value: "approved" },
    { label: <div className='orderStatus_select'><FaTimes /> Rejected</div>, value: "rejected" },
    { label: <div className='orderStatus_select'><FaBan /> Pending Cancellation</div>, value: "pending_cancellation" }
  ];
    const { data:Coupon } = useGetCoupon()
  

    const SelectData = Coupon?.coupons?.map((item:any)=>(
      {
        label : item?.name,
        value : item?.id
      }
    ))
    const location = useLocation();
    const navigate = useNavigate();
    const { username, coupon, state, fromDate, toDate, totalFrom, totalTo,reset } = useOrderFillterState();


    const handleSubmit = () => {
        let queryParams = [];
    
        if (username !== null) {
            queryParams.push(`username=${username}`);
        }
        if (coupon !== null) {
            queryParams.push(`coupon=${coupon}`);
        }
        if (state !== null) {
            queryParams.push(`state=${state}`);
        }
        if (fromDate !== null) {
            queryParams.push(`fromDate=${fromDate}`);
        }
        if (toDate !== null) {
            queryParams.push(`toDate=${toDate}`);
        }
        if (totalFrom !== null) {
            queryParams.push(`totalFrom=${totalFrom}`);
        }
        if (totalTo !== null) {
            queryParams.push(`totalTo=${totalTo}`);
        }
    
        const queryString = queryParams.join('&');
        const newPathname = `${location.pathname}${queryString ? '?' : ''}${queryString}`;
    
        navigate(newPathname);
    };
    

    const handelReset=()=>{

      navigate(`${location.pathname}`);
      reset()
      

    }

    
  return (

    <>
      <DashBody status={status as QueryStatusEnum} >
 
        <DashHeader title="orders" showAddButton={false}>
      <div className='FillterSection'>
     <CustomSearchField searchBy={"username"} />
     <SelectWSearchField selectBy="coupon" submiteBy="coupon_id" lebel="Coupon" option={SelectData} />
     <SelectField  selectBy="state"  lebel="status" option={stateSelect} />
   <CustomDateRange/>
   <CustomNumber/>
  <Button type="dashed" onClick={handelReset} >reset</Button>
  <Button type="primary" onClick={handleSubmit} >submite</Button>

     </div>
      </DashHeader>

      
        <LyTable
          data={data?.Orders}
          total={totalRows}
          column={columns}
          is_pagination={true}


        />
      </DashBody>

    </>
  );
};

export default OrderPage;