import { useContext } from "react";
import { useTranslation } from "react-i18next";
import { Handle, Node, NodeProps, Position } from "@xyflow/react";
import Base from "./Base";

import { BusContext } from "../Bus";

export type ToshoListed = Node<{
  prime: boolean,
  standard: boolean,
  growth: boolean,
}, "fetch_ToshoListed">;
export function ToshoListed(node: NodeProps<ToshoListed>) {
  const {id, data} = node;

  const {t} = useTranslation();

  const bus = useContext(BusContext);
  if (bus === undefined) {
    throw Error("bus is not installed");
  }

  const update =
    (market: string, value: boolean)=>
    bus.emit("reqModifyNode", {id: id, data: {[market]: value}});

  return (
    <Base
      node={node}
      title={t("pages.screening.nodes.fetch_ToshoListed.title")}
    >
      <div>
        <div><label>
          <input
            type="checkbox"
            name="prime"
            checked={data.prime}
            onChange={(e)=>update("prime", e.target.checked)}
          />
          {t("terms.toshoPrime")}
        </label></div>
        <div><label>
          <input
            type="checkbox"
            name="standard"
            checked={data.standard}
            onChange={(e)=>update("standard", e.target.checked)}
          />
          {t("terms.toshoStandard")}
        </label></div>
        <div><label>
          <input
            type="checkbox"
            name="growth"
            checked={data.growth}
            onChange={(e)=>update("growth", e.target.checked)}
          />
          {t("terms.toshoGrowth")}
        </label></div>
      </div>
      <Handle type="source" position={Position.Right}/>
    </Base>
  );
}