import { Button, Col, Descriptions, Popover, Row, Tag } from "antd";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import VehicleVinDisplay from "../vehicle-vin-display/vehicle-vin-display.component";
import { connect } from "react-redux";
import { selectIsPartsEntry } from "../../redux/application/application.selectors";
import { createStructuredSelector } from "reselect";
import getPartsBasePath from "../../utils/getPartsBasePath.js";

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

export function VehicleTagPopoverComponent({ job, isPartsEntry }) {
  const { t } = useTranslation();
  const basePath = getPartsBasePath(isPartsEntry);
  if (!job.vehicle) return null;

  const content = (
    <div style={{ width: "400px" }}>
      <Row>
        <Col span={12}>
          <Descriptions title={t("owners.labels.fromclaim")} column={1}>
            <Descriptions.Item key="1" label={t("jobs.fields.vehicle")}>
              {`${job.v_model_yr || t("general.labels.na")} ${job.v_color || ""} 
            ${job.v_make_desc || t("general.labels.na")} 
            ${job.v_model_desc || t("general.labels.na")}`}
            </Descriptions.Item>

            <Descriptions.Item key="2" label={t("vehicles.fields.plate_no")}>
              {`${job.plate_no || t("general.labels.na")}`}
            </Descriptions.Item>
            <Descriptions.Item key="3" label={t("vehicles.fields.plate_st")}>
              {`${job.plate_st || t("general.labels.na")}`}
            </Descriptions.Item>
            <Descriptions.Item key="4" label={t("vehicles.fields.v_vin")}>
              <VehicleVinDisplay>{`${job.v_vin || t("general.labels.na")}`}</VehicleVinDisplay>
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={12}>
          <Descriptions title={t("vehicles.labels.fromvehicle")} column={1}>
            <Descriptions.Item key="1" label={t("jobs.fields.vehicle")}>
              {`${job.vehicle.v_model_yr || t("general.labels.na")} 
        ${job.vehicle.v_make_desc || t("general.labels.na")} 
        ${job.vehicle.v_model_desc || t("general.labels.na")}`}
            </Descriptions.Item>

            <Descriptions.Item key="2" label={t("vehicles.fields.plate_no")}>
              {`${job.vehicle.plate_no || t("general.labels.na")}`}
            </Descriptions.Item>
            <Descriptions.Item key="3" label={t("vehicles.fields.plate_st")}>
              {`${job.vehicle.plate_st || t("general.labels.na")}`}
            </Descriptions.Item>
            <Descriptions.Item key="4" label={t("vehicles.fields.v_vin")}>
              <VehicleVinDisplay>{`${job.vehicle.v_vin || t("general.labels.na")}`}</VehicleVinDisplay>
            </Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
      <Link to={`${basePath}/vehicles/${job.vehicle.id}`}>
        <Button>{t("vehicles.labels.updatevehicle")}</Button>
      </Link>
    </div>
  );

  return (
    <Popover placement="bottom" content={content}>
      <Tag color="blue">
        {job.vehicleid ? (
          <Link to={`${basePath}/vehicles/${job.vehicleid}`}>
            {`${job.v_model_yr || ""} ${job.v_color || ""} 
        ${job.v_make_desc || ""} 
        ${job.v_model_desc || ""} | 
        ${job.plate_no || ""}`}
          </Link>
        ) : (
          <span>
            {`${job.v_model_yr || ""} 
      ${job.v_make_desc || ""} 
      ${job.v_model_desc || ""} | 
      ${job.plate_no || ""}`}
          </span>
        )}
      </Tag>
    </Popover>
  );
}

export default connect(mapStateToProps)(VehicleTagPopoverComponent);
