Dwinzo_dev/app/src/components/ui/simulation/AssetDetailsCard.tsx

import React, { useState } from "react";
import {
  CartBagIcon,
  ExpandIcon,
  IndicationArrow,
  SimulationStatusIcon,
  StorageCapacityIcon,
} from "../../icons/SimulationIcons";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";

interface AssetDetailsCardInterface {
  name: string;
  status: string;
  enableStatue?: boolean;
  count?: number;
  totalCapacity?: number;
  assetDetails?: {
    assetName: string;
    const: string;
    performance: string;
  };
}

const GetStatus = (status: string) => {
  // "idle" | "running" | "stopped" | "disabled" | "error"
  switch (status) {
    case "idle":
      return (
        <div className="status">
          <div className="icon">
            <SimulationStatusIcon color="#FFD321" />
          </div>
          <div className="value">Idle</div>
        </div>
      );
    case "running":
      return (
        <div className="status">
          <div className="icon">
            <SimulationStatusIcon color="#21FF59" />
          </div>
          <div className="value">Running</div>
        </div>
      );
    case "stopped":
      return (
        <div className="status">
          <div className="icon">
            <SimulationStatusIcon color="#FF1010" />
          </div>
          <div className="value">Stopped</div>
        </div>
      );
  }
};

const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
  name,
  enableStatue = true,
  status,
  count,
  totalCapacity,
  assetDetails,
}) => {
  const [moreDetails, setMoreDetails] = useState(false);
  // hooks
  const { isPlaying } = usePlayButtonStore();

  return (
    <div
      className="asset-details-card-wrapper"
      style={{ display: isPlaying ? "" : "none" }}
    >
      <div className="asset-details-card-container">
        <div className="asset-details-header">
          <div className="content">
            <div className="name">{name}</div>
            {enableStatue && (
              <div className="status-container">{GetStatus(status)}</div>
            )}
            {!enableStatue && totalCapacity && (
              <div className="storage-container">Storage/Inventory</div>
            )}
          </div>
          <button
            className="expand-button"
            onClick={() => {
              setMoreDetails(!moreDetails);
            }}
          >
            <ExpandIcon />
          </button>
        </div>

        {totalCapacity && (
          <div className="count-ui-wrapper">
            <div className="count-ui-container">
              <div className="content">
                <div className="icon">
                  <StorageCapacityIcon />
                </div>
                <div className="display">
                  {count?.toString()}/{totalCapacity}
                </div>
              </div>
              {/* progress ui */}
              <div className="value-container">
                <div className="progress-bar">
                  {[...Array(5)].map((_, i) => {
                    const percentage = (count ?? 0 / totalCapacity) * 100;
                    const start = i * 20;
                    const end = (i + 1) * 20;
                    // fill amount: 0 to 100
                    let fillPercent = 0;
                    if (percentage >= end) {
                      fillPercent = 100;
                    } else if (percentage <= start) {
                      fillPercent = 1;
                    } else {
                      fillPercent = ((percentage - start) / 20) * 100;
                    }
                    return (
                      <div key={i} className="block">
                        <div
                          className="fill"
                          style={
                            {
                              "--process-fill-percentage": `${fillPercent}%`,
                            } as React.CSSProperties
                          }
                        ></div>
                      </div>
                    );
                  })}
                </div>
                <div className="value">
                  {Math.round((count ?? 0 / totalCapacity) * 100).toString()}%
                </div>
              </div>
            </div>
          </div>
        )}

        {status === "running" && (
          <div className={`process-running-container ${status}`}>
            <div
              className="process-running"
              style={{ "--process-color": "#21FF59" } as React.CSSProperties}
            ></div>
          </div>
        )}
        <div className="indication-arrow">
          <IndicationArrow />
        </div>
      </div>
    </div>
  );
};

export default AssetDetailsCard;