import { Space, Tag } from "antd";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { selectIsPartsEntry } from "../../redux/application/application.selectors.js";
import { connect } from "react-redux";
import getPartsBasePath from "../../utils/getPartsBasePath.js";

const mapStateToProps = createStructuredSelector({
  isPartsEntry: selectIsPartsEntry
});

function JobsRelatedRos({ job, disabled, isPartsEntry }) {
  if (!(job?.vehicle && job.vehicle.jobs)) return null;
  const basePath = getPartsBasePath(isPartsEntry);

  return (
    <Space wrap>
      {job.vehicle.jobs
        .filter((j) => j.id !== job.id)
        .map((j) => (
          <Tag key={j.id}>
            {disabled ? (
              <>{`${j.ro_number || "N/A"}${j.clm_no ? ` | ${j.clm_no}` : ""}${j.status ? ` | ${j.status}` : ""}`}</>
            ) : (
              <Link to={`${basePath}/jobs/${j?.id}`}>{`${j.ro_number || "N/A"}${
                j.clm_no ? ` | ${j.clm_no}` : ""
              }${j.status ? ` | ${j.status}` : ""}`}</Link>
            )}
          </Tag>
        ))}
    </Space>
  );
}
export default connect(mapStateToProps)(JobsRelatedRos);
