import React, { Suspense, useEffect } from 'react';
import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
import ReturnTable from './components/order-daily-overview/return-order-table/ReturnTable';
import ReturnAfterTable from './components/order-daily-overview/return-after-table/ReturnAfterTable';
import {
  useSelectedAction,
  useSelectedClient,
  useSelectedLocation,
} from './components/order-daily-overview/store/store';
import { notification } from 'antd';
// import RouterHeader from './components/order-daily-overview/header/route-header/RouterHeader';
import {
  useActionType,
  useActionTypeOptions,
  useAssignData,
  useClientPortal,
  useLocationData,
  useStatusOrderData,
  useVisibilityData,
} from './components/store';
import { ApiResponse } from './components/types';
import { useApiHook } from '@bjsdistribution/dms-component-library';
import {
  useLocationOptions,
  useOrderStaticData,
} from './components/order-view/store';
import OrderViewQueryHandler from './OrderViewQueryHandler';
import OrderView from './components/order-view';
import ReturnOverview from './components/client-portal/ReturnOverview';
import RouterHeader from './components/order-daily-overview/header/route-header/RouterHeader';
function ReturnClient() {
  notification.config({
    top: 80,
  });
  const LoadingMessage = () => <div>Loading...</div>;
  const [, setActionType] = useActionType();
  const [, setLocationData] = useLocationData();
  const [, setStatusOfOrders] = useStatusOrderData();
  const [, setAssignData] = useAssignData();
  const [, setActionTypeOptions] = useActionTypeOptions();
  const [, setLocationOptions] = useLocationOptions();
  const [, setSelectedFilterValue] = useSelectedAction();
  const [, setSelectedClient] = useSelectedClient();
  const [searchParams] = useSearchParams();
  const [, setSelectedLocationValue] = useSelectedLocation();
  const [, setVisibilityData] = useVisibilityData();
  const [, setOrderStaticData] = useOrderStaticData();
  const [clientPortal, setClientPortal] = useClientPortal();

  const userType = JSON.parse(localStorage.getItem('user_type')!);

  useEffect(() => {
    setClientPortal(userType?.is_customer || false); // change it to false bydefault
  }, []);

  const splitPath = (str: any) => {
    const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
    return parts;
  };
  const paths = splitPath(location.pathname);

  useEffect(() => {
    if (paths.join('/') === 'orders/view/return') {
      setActionTypeOptions([]);
      setLocationOptions([]);
      setSelectedClient(null);
      setSelectedFilterValue(null);
      setSelectedLocationValue(null);
    }
  }, [location.pathname, searchParams]);

  //API for action type
  const { data: fetchedStaticData, loading: actionLoading } = useApiHook<
    ApiResponse
  >({
    endpoint: `/orders/getStaticData/all/`,
    method: 'GET',
  });
  //API for return locations
  const { data: fetchedLocationData, loading: locationloading } = useApiHook<
    ApiResponse
  >({
    endpoint: `/return_locations/`,
    method: 'GET',
    //@ts-ignore
    pagination: { is_pagination: false },
  });

  useEffect(() => {
    if (fetchedStaticData && fetchedStaticData?.data) {
      const result = fetchedStaticData?.data;
      setOrderStaticData(result[0]);
      setVisibilityData(
        fetchedStaticData?.data?.flatMap(
          (i: any) => i?.resource_visibility_type
        )
      );

      setActionType(
        fetchedStaticData?.data?.flatMap(
          (i: any) => i?.order_product_return_action
        )
      );

      //for status of return orders key changes
      setStatusOfOrders(
        fetchedStaticData?.data?.flatMap((i: any) => i?.return_order_status)
      );
      setAssignData(
        fetchedStaticData?.data?.flatMap((i: any) => i?.assign_client)
      );
    }
  }, [actionLoading]);
  useEffect(() => {
    if (fetchedLocationData && fetchedLocationData?.data) {
      setLocationData(fetchedLocationData?.data);
    }
  }, [locationloading]);

  return (
    <>
      {!clientPortal && <RouterHeader />}
      <Suspense fallback={<LoadingMessage />}>
        {clientPortal ? (
          <Routes>
            <Route path="" element={<Navigate to={'outstanding_return'} />} />
            <Route path=":status" element={<ReturnOverview />} />
          </Routes>
        ) : (
          <Routes>
            {/* for local */}
            {/* <Route
            path="/orders/view/return/*"
            element={<OrderViewQueryHandler />}
          /> */}
            {/* for dev */}
            <Route path="" element={<OrderViewQueryHandler />} />
            <Route path="overview" element={<ReturnAfterTable />} />
            <Route path="/:id" element={<OrderView />} />
            {/* for local */}
            {/* <Route path="/orders/view/return/filter" element={<ReturnTable />} /> */}
            {/* for dev */}
            <Route path="filter" element={<ReturnTable />} />
          </Routes>
        )}
      </Suspense>
    </>
  );
}
export default ReturnClient;
