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

interface AssetDetailsCardInterface {
  name: string;
  status: string;
  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,
  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>
            <div className="status-container">{GetStatus(status)}</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="icon">
                <CartBagIcon />
              </div>
              <div className="value">{count?.toString()}</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;