import PropTypes from "prop-types";
import React from "react";
import { Link } from "react-router-dom";
import Shapes from "../../shapes/index";

const ExperimentRowComponent = ({ experiment, simulationId, onDelete }) => (
  <tr>
    <td className="pt-3">{experiment.name}</td>
    <td className="pt-3">
      {experiment.path.name
        ? experiment.path.name
        : "Path " + experiment.path.id}
    </td>
    <td className="pt-3">{experiment.trace.name}</td>
    <td className="pt-3">{experiment.scheduler.name}</td>
    <td className="text-right">
      <Link
        to={"/simulations/" + simulationId + "/experiments/" + experiment.id}
        className="btn btn-outline-primary btn-sm mr-2"
        title="Open this experiment"
      >
        <span className="fa fa-play" />
      </Link>
      <div
        className="btn btn-outline-danger btn-sm"
        title="Delete this experiment"
        onClick={() => onDelete(experiment.id)}
      >
        <span className="fa fa-trash" />
      </div>
    </td>
  </tr>
);

ExperimentRowComponent.propTypes = {
  experiment: Shapes.Experiment.isRequired,
  simulationId: PropTypes.number.isRequired
};

export default ExperimentRowComponent;