import React, { useEffect, useState } from "react";
import OrderButtons from "./OrderButtons";
import { FiChevronRight } from "react-icons/fi";
import OrderDetails from "./OrderDetails";

const OrderIndexItem = ({
  order,
  collapseAll,
  expandAll,
  setCollapseAll,
  setExpandAll,
}) => {
  // const { orderId, status } = order;
  // const idToShow = orderId.slice(-7).toUpperCase();

  const [showDetails, setShowDetails] = useState(false);

  useEffect(() => {
    if (collapseAll) {
      setShowDetails(false);
    }
    if (expandAll) {
      setShowDetails(true);
    }
    setCollapseAll(false);
    setExpandAll(false);
  }, [showDetails, collapseAll, expandAll, setCollapseAll, setExpandAll]);

  if (!order.orderId) return null;
  const { orderId, status } = order;
  const idToShow = orderId.slice(-7).toUpperCase();

  const handleDropDown = () => {
    setShowDetails(!showDetails);
  };

  const actions =
    status === "FULFILLED" || status === "CANCELLED" ? (
      <div className={`oii-status ${status.toLowerCase()}`}>{status}</div>
    ) : (
      <OrderButtons order={order} />
    );

  return (
    <div className="oii">
      <div className="oii-container">
        <div className="oii-left">
          <FiChevronRight
            className={`oii-drop ${showDetails ? "rotate" : ""}`}
            onClick={handleDropDown}
          />
          <div className="oii-num">{`Order #: ${orderId}`}</div>
        </div>
        {actions}
      </div>

      <OrderDetails showDetails={showDetails} order={order} />
    </div>
  );
};

export default OrderIndexItem;