import React, { useEffect } from 'react';
// import CollapsedContent from './collapsed-content';
// import CollapsableForm from '../../../common/expand-collapse';
import ExpandedContent from './expanded-content';
import { useCustomerDetails, useOrderDetails } from '../store';
import { useApiHook } from '@bjsdistribution/dms-component-library';

interface ApiResponse {
  message: string;
  code: number;
  error: string | null;
  error_traceback: string | null;
  data: [];
  setShouldPerformAction: boolean;
}

function OrderDetails() {
  const [orderData] = useOrderDetails();
  const customerData = orderData;
  const id = customerData?.customer_id;

  // For API Call
  const [, setCustomerData] = useCustomerDetails();
  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
    data: ApiResponse[];
  }>({
    endpoint: `customers/${id}`,
    method: 'GET',
    performAction: false,
  });

  useEffect(() => {
    if (id) {
      setShouldPerformAction(true);
    }
  }, [id]);

  useEffect(() => {
    if (fetchedData && fetchedData?.data) {
      const requiredData = fetchedData?.data;
      setCustomerData(requiredData[0]);
    }
  }, [fetchedData, loading]);

  return (
    <>
      <ExpandedContent />
    </>
  );
}

export default OrderDetails;
