import { WarningOutlined, CloudUploadOutlined } from "@ant-design/icons";
import { Card, List } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setSelectedJobId } from "../../../redux/application/application.actions";
import { selectSelectedJobId } from "../../../redux/application/application.selectors";
import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.atom";
import "./jobs-list-item.styles.scss";
import RequiresReimportDisplay from "../../atoms/requires-reimport/requires-reimport.atom";

const mapStateToProps = createStructuredSelector({
  selectedJobId: selectSelectedJobId
});
const mapDispatchToProps = (dispatch) => ({
  setSelectedJobId: (jobId) => dispatch(setSelectedJobId(jobId))
});

export function JobsListItemMolecule({ selectedJobId, setSelectedJobId, item, refetch }) {
  const handleSelect = (jobId) => {
    setSelectedJobId(jobId);
  };

  if (item.isRefresh)
    return (
      <List.Item
        className="jobs-list-item-refresh"
        key="refreshItem"
        onClick={() => {
          refetch();
        }}
      >
        <div className="jobs-list-item-refresh-content">Refresh All</div>
      </List.Item>
    );

  return (
    <List.Item className="jobs-list-item" key={item.id} onClick={() => handleSelect(item.id)}>
      <Card className={`jobs-list-item-content ${item.id === selectedJobId ? "jobs-list-item-content-selected" : ""}`}>
        <div
          style={{
            display: "flex",

            justifyContent: "space-between"
          }}
        >
          <strong>
            {item.clm_no || "No Claim Number"}
            {!item.close_date && (
              <WarningOutlined
                title="No Ready for Payment Date has been set for this job."
                className="blink_me"
                style={{ marginLeft: ".5rem", color: "tomato" }}
              />
            )}
            <RequiresReimportDisplay job={item} />
          </strong>
          <span style={{ fontStyle: "italic" }}>
            <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
          </span>
        </div>

        <div>{item.ins_co_nm || "No Insurance Co."}</div>
        <div>{`${item.ownr_fn} ${item.ownr_ln}`}</div>
        <div>{`${item.v_model_yr} ${item.v_makedesc} ${item.v_model} ${item.v_vin}`}</div>
      </Card>
    </List.Item>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(JobsListItemMolecule);
