import React from "react";
import StatsNode from "./StatsNode";
import ConversionRate from "./ConversionRate";
import TimelineSelector from "./TimelineSelector";

export const onListItems = (hook, payload, actions) => {
  // Add a Stats Button on the toolbar
  if (hook.id === "CampaignSettingsMenu") {
    const {
      getCampaignState = () => null,
      setCampaignState = () => null,
    } = actions;

    const isShowingStats = getCampaignState("isShowingStats");

    return [
      {
        id: "stats",
        icon: "equalizer",
        caption: isShowingStats ? "Hide Stats" : "View Stats",
        onSelect: () => {
          setCampaignState((prevState) => ({
            isShowingStats: !prevState.isShowingStats,
          }));
        },
      },
    ];
  }
};

// Switch out the canvas objects with the stats object if stats are toggled
export const onComponentRender = (hook, payload, actions) => {
  if (hook.id === "CanvasObject") {
    const {
      getCampaignState = () => null,
      setCampaignState = () => null,
    } = actions;

    const isShowingStats = getCampaignState("isShowingStats");
    if (isShowingStats) {
      const CustomStatsNode = () => (
        <StatsNode
          getCampaignState={getCampaignState}
          setCampaignState={setCampaignState}
        />
      );
      return [CustomStatsNode];
    }
  }

  if (hook.id === "ConnectionLine") {
    const { getCampaignState } = actions;
    const isShowingStats = getCampaignState("isShowingStats");
    if (isShowingStats) return [ConversionRate];
  }

  if (hook.id === "CampaignSettingsToolbar") {
    const {
      getCampaignState = () => null,
      setCampaignState = () => null,
    } = actions;

    const isShowingStats = getCampaignState("isShowingStats");
    if (isShowingStats) {
      const CustomTimelineSelector = () => (
        <TimelineSelector
          getCampaignState={getCampaignState}
          setCampaignState={setCampaignState}
        />
      );
      return [CustomTimelineSelector];
    }
  }
};