import React from "react";
import { Card, Row, Col, Dropdown } from "antd";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
import { EyeFilled } from "@ant-design/icons";
import { Link } from "react-router-dom";
import "./production-board-card.styles.scss";
import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
import { useTranslation } from "react-i18next";
import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";

export default function ProductionBoardCard(technician, card) {
  const { t } = useTranslation();
  const menu = (
    <div>
      <Card title={t("general.labels.actions")}>
        <ProductionRemoveButton jobId={card.id} />
      </Card>
    </div>
  );

  return (
    <Dropdown overlay={menu} trigger={["contextMenu"]}>
      <Card
        className="react-kanban-card imex-kanban-card tight-antd-rows"
        style={{ margin: ".2rem 0rem" }}
        size="small"
        title={`${card.ro_number || t("general.labels.na")} - ${
          card.v_model_yr
        } ${card.v_make_desc || ""} ${card.v_model_desc || ""}`}
      >
        <Row>
          <Col span={24}>
            <div className="ellipses">{`${card.ownr_fn || ""} ${
              card.ownr_ln || ""
            } ${card.ownr_co_nm || ""}`}</div>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <div className="ellipses">{card.clm_no || ""}</div>
          </Col>
          <Col span={12}>
            <div className="ellipses">{card.ins_co_nm || ""}</div>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <div className="imex-flex-row imex-flex-row__flex-space-around">
              <div className="mex-flex-row__margin">
                <div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
                <div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
              </div>
              <div className="mex-flex-row__margin">
                <div>{`B: ${
                  card.employee_body_rel
                    ? `${card.employee_body_rel.first_name} ${card.employee_body_rel.last_name}`
                    : ""
                }`}</div>
                <div>{`P: ${
                  card.employee_prep_rel
                    ? `${card.employee_prep_rel.first_name} ${card.employee_prep_rel.last_name}`
                    : ""
                }`}</div>
                <div>{`R: ${
                  card.employee_refinish_rel
                    ? `${card.employee_refinish_rel.first_name} ${card.employee_refinish_rel.last_name}`
                    : ""
                }`}</div>
              </div>
            </div>
          </Col>
        </Row>
        <Row>
          <Col span={18}>
            <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
          </Col>
          <Col span={6}>
            <div>{card.alt_transport || ""}</div>
          </Col>
        </Row>
        <div>
          <ProductionListColumnProductionNote record={card} />
        </div>
        <div className="imex-flex-row imex-flex-row__flex-space-around">
          <ProductionAlert record={card} key="alert" />
          <ProductionSubletsManageComponent subletJobLines={card.subletLines} />
          {technician ? (
            <Link to={`/tech/joblookup?selected=${card.id}`}>
              <EyeFilled />
            </Link>
          ) : (
            <Link to={`/manage/jobs/${card.id}`}>
              <EyeFilled />
            </Link>
          )}
        </div>
      </Card>
    </Dropdown>
  );
}