import { Button } from "@sc/components/ui";
import React from "react";
import StatsNode from "./StatsNode";

export const onListItems = ({ type, id }, { item, items, getCanvasState, setCanvasState }) => {
  
  // Add a Stats Button on the toolbar
  if (type == "toolbar" && id === "canvas") {
    return {
      ...item,
      rightActionsGroup: [
        props => <Button icon onClick={() => setCanvasState(prevState => ({ showStats: !prevState.showStats }))}>bar_chart</Button>,
        ...item.rightActionsGroup,        
      ]
    }
  }

  // Switch out the canvas objects with the stats object if stats is toggled
  if (type === "CanvasObjects") {
    return [
      ...items,
      {
        ...item,
        component: getCanvasState().showStats ? <StatsNode {...item} /> : item.component,
      }
    ]
  }

}

// Collect Stats
export const onRouteUpdate = ({ location, prevLocation }, pluginOptions) => {
  // send stats payload to dynamo db
  // call a lambda function that does it
}