import { Button, Col, Descriptions, Popover, Row, Tag } from "antd";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import PhoneFormatter from "../../utils/PhoneFormatter";
import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";

export default function OwnerTagPopoverComponent({ job }) {
  const { t } = useTranslation();
  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.owner")}>
              <OwnerNameDisplay ownerObject={job} />
            </Descriptions.Item>
            <Descriptions.Item key="2" label={t("jobs.fields.ownr_ph1")}>
              <PhoneFormatter type={job.ownr_ph1_ty}>{job.ownr_ph1 || ""}</PhoneFormatter>
            </Descriptions.Item>
            <Descriptions.Item key="22" label={t("jobs.fields.ownr_ph2")}>
              <PhoneFormatter type={job.ownr_ph2_ty}>{job.ownr_ph2 || ""}</PhoneFormatter>
            </Descriptions.Item>
            <Descriptions.Item key="3" label={t("owners.fields.address")}>
              {`${job.ownr_addr1 || ""} ${job.ownr_addr2 || ""} ${
                job.ownr_city || ""
              } ${job.ownr_st || ""} ${job.ownr_zip || ""}`}
            </Descriptions.Item>
            <Descriptions.Item key="4" label={t("owners.fields.ownr_ea")}>
              {job.ownr_ea || ""}
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={12}>
          <Descriptions title={t("owners.labels.fromowner")} column={1}>
            <Descriptions.Item key="1" label={t("jobs.fields.owner")}>
              <OwnerNameDisplay ownerObject={job.owner} />
            </Descriptions.Item>
            <Descriptions.Item key="2" label={t("jobs.fields.ownr_ph1")}>
              <PhoneFormatter type={job.owner.ownr_ph1_ty}>{job.owner.ownr_ph1 || ""}</PhoneFormatter>
            </Descriptions.Item>
            <Descriptions.Item key="2" label={t("jobs.fields.ownr_ph2")}>
              <PhoneFormatter type={job.owner.ownr_ph2_ty}>{job.owner.ownr_ph2 || ""}</PhoneFormatter>
            </Descriptions.Item>
            <Descriptions.Item key="3" label={t("owners.fields.address")}>
              {`${job.owner.ownr_addr1 || ""} ${job.owner.ownr_addr2 || ""} ${
                job.owner.ownr_city || ""
              } ${job.owner.ownr_st || ""} ${job.owner.ownr_zip || ""} ${job.owner.ownr_ctry || ""} `}
            </Descriptions.Item>
            <Descriptions.Item key="4" label={t("owners.fields.ownr_ea")}>
              {job.owner.ownr_ea || ""}
            </Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
      <Link to={`/manage/owners/${job.owner.id}`}>
        <Button>{t("owners.labels.updateowner")}</Button>
      </Link>
    </div>
  );

  return (
    <Popover placement="bottom" content={content}>
      <Tag color="cyan">
        <Link to={`/manage/owners/${job.owner.id}`}>
          {job.owner ? OwnerNameDisplayFunction(job) : t("jobs.errors.noowner")}
        </Link>
      </Tag>
    </Popover>
  );
}
