import {
  BranchesOutlined,
  CalendarOutlined,
  DownloadOutlined,
  EyeFilled,
  PauseCircleOutlined
} from "@ant-design/icons";
import { Card, Col, Row, Space, Tooltip } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
import "./production-board-card.styles.scss";
import dayjs from "../../utils/day";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";

const cardColor = (ssbuckets, totalHrs) => {
  const bucket = ssbuckets.filter((bucket) => bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true))[0];

  let color = { r: 255, g: 255, b: 255 };

  if (bucket && bucket.color) {
    color = bucket.color;

    if (bucket.color.rgb) {
      color = bucket.color.rgb;
    }
  }

  return color;
};

function getContrastYIQ(bgColor) {
  const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;

  return yiq >= 128 ? "black" : "white";
}

export default function ProductionBoardCard(technician, card, bodyshop, cardSettings) {
  const { t } = useTranslation();

  let employee_body, employee_prep, employee_refinish, employee_csr;
  if (card.employee_body) {
    employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
  }
  if (card.employee_prep) {
    employee_prep = bodyshop.employees.find((e) => e.id === card.employee_prep);
  }
  if (card.employee_refinish) {
    employee_refinish = bodyshop.employees.find((e) => e.id === card.employee_refinish);
  }
  if (card.employee_csr) {
    employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
  }
  // if (card.employee_csr) {
  //   employee_csr = bodyshop.employees.find((e) => e.id === card.employee_csr);
  // }

  const pastDueAlert =
    !!card.scheduled_completion &&
    ((dayjs().isSameOrAfter(dayjs(card.scheduled_completion), "day") && "production-completion-past") ||
      (dayjs().add(1, "day").isSame(dayjs(card.scheduled_completion), "day") && "production-completion-soon"));

  const totalHrs = card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);

  return (
    <Card
      className="react-kanban-card imex-kanban-card"
      size="small"
      style={{
        backgroundColor:
          cardSettings && cardSettings.cardcolor && `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
        color: cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor)
      }}
      title={
        <Space>
          <ProductionAlert record={card} key="alert" />
          {card.suspended && <PauseCircleOutlined style={{ color: "orangered" }} />}
          {card.iouparent && (
            <Tooltip title={t("jobs.labels.iou")}>
              <BranchesOutlined style={{ color: "orangered" }} />
            </Tooltip>
          )}
          <span style={{ fontWeight: "bolder" }}>
            <Link to={technician ? `/tech/joblookup?selected=${card.id}` : `/manage/jobs/${card.id}`}>
              {card.ro_number || t("general.labels.na")}
            </Link>
          </span>
        </Space>
      }
      extra={
        <Link to={{ search: `?selected=${card.id}` }}>
          <EyeFilled />
        </Link>
      }
    >
      <Row>
        {cardSettings && cardSettings.ownr_nm && (
          <Col span={24}>
            {cardSettings && cardSettings.compact ? (
              <div className="ellipses">{`${card.ownr_ln || ""} ${card.ownr_co_nm || ""}`}</div>
            ) : (
              <div className="ellipses">
                <OwnerNameDisplay ownerObject={card} />
              </div>
            )}
          </Col>
        )}
        <Col span={24}>
          <div className="ellipses">{`${card.v_model_yr || ""} ${
            card.v_make_desc || ""
          } ${card.v_model_desc || ""}`}</div>
        </Col>
        {cardSettings && cardSettings.ins_co_nm && card.ins_co_nm && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <div className="ellipses">{card.ins_co_nm || ""}</div>
          </Col>
        )}
        {cardSettings && cardSettings.clm_no && card.clm_no && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <div className="ellipses">{card.clm_no || ""}</div>
          </Col>
        )}

        {cardSettings && cardSettings.employeeassignments && (
          <Col span={24}>
            <Row>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
                employee_body ? `${employee_body.first_name.substr(0, 3)} ${employee_body.last_name.charAt(0)}` : ""
              } ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
                employee_prep ? `${employee_prep.first_name.substr(0, 3)} ${employee_prep.last_name.charAt(0)}` : ""
              }`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
                employee_refinish
                  ? `${employee_refinish.first_name.substr(0, 3)} ${employee_refinish.last_name.charAt(0)}`
                  : ""
              } ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}h`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
                employee_csr ? `${employee_csr.first_name} ${employee_csr.last_name}` : ""
              }`}</Col>
            </Row>
          </Col>
        )}
        {/* {cardSettings && cardSettings.laborhrs && (
          <Col span={24}>
            <Row>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
                card.labhrs.aggregate.sum.mod_lb_hrs || "?"
              } hrs`}</Col>
              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
                card.larhrs.aggregate.sum.mod_lb_hrs || "?"
              } hrs`}</Col>
            </Row>
          </Col>
        )} */}
        {cardSettings && cardSettings.actual_in && card.actual_in && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <Space>
              <DownloadOutlined />
              <DateTimeFormatter format="MM/DD">{card.actual_in}</DateTimeFormatter>
            </Space>
          </Col>
        )}
        {cardSettings && cardSettings.scheduled_completion && card.scheduled_completion && (
          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
            <Space className={pastDueAlert}>
              <CalendarOutlined />
              <DateTimeFormatter format="MM/DD">{card.scheduled_completion}</DateTimeFormatter>
            </Space>
          </Col>
        )}
        {cardSettings && cardSettings.ats && card.alt_transport && (
          <Col span={12}>
            <div>{card.alt_transport || ""}</div>
          </Col>
        )}
        {cardSettings && cardSettings.sublets && (
          <Col span={12}>
            <ProductionSubletsManageComponent subletJobLines={card.subletLines} />
          </Col>
        )}
        {cardSettings && cardSettings.production_note && (
          <Col span={24}>
            {cardSettings && cardSettings.production_note && <ProductionListColumnProductionNote record={card} />}
          </Col>
        )}
        {cardSettings && cardSettings.partsstatus && (
          <Col span={24}>
            <JobPartsQueueCount parts={card.joblines_status} />
          </Col>
        )}
      </Row>
    </Card>
  );
}
