██╗ ██╗██████╗ ██╗ ██╗██║ ██║██╔═══╝ ╚██╗██╔╝███████║██████╗ █████╗ ╚███╔╝ ██╔══██║╚═══██║ ╚════╝ ██╔██╗ ██║ ██║██████║ ██╔╝ ██╗╚═╝ ╚═╝╚═════╝ ╚═╝ ╚═╝

import { useEffect, useState } from "react";
import { Kanban } from "hs-uix/kanban";
import { formatCurrency } from "hs-uix/utils";
import { hubspot } from "@hubspot/ui-extensions";

const STAGES = [
  { value: "discovery", label: "Discovery" },
  { value: "proposal", label: "Proposal sent", wipLimit: 3, variant: "warning" },
  { value: "negotiation", label: "Negotiation" },
  { value: "closedwon", label: "Closed won", variant: "success", terminal: true },
];

const CARD_FIELDS = [
  { field: "name", placement: "title" },
  { field: "amount", placement: "meta", render: v => formatCurrency(v) },
  { field: "owner", placement: "footer" },
];

function DealBoard({ context, runServerless }) {
  const [deals, setDeals] = useState([]);
  useEffect(() => {
    runServerless({ name: "listDeals", parameters: { companyId: context.crm.objectId } })
      .then(r => setDeals(r.response));
  }, [context.crm.objectId]);

  return (
    <Kanban
      data={deals}
      stages={STAGES}
      groupBy="stage"
      cardFields={CARD_FIELDS}
      selectable
      onStageChange={(row, stage) =>
        runServerless({ name: "advanceDeal", parameters: { id: row.id, stage } })}
      onWipExceeded={(stage, count, limit) =>
        runServerless({ name: "flagWip", parameters: { stage, count, limit } })}
    />
  );
}

hubspot.extend(() => <DealBoard />);