//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//     Use React to create time bar and chart with font icons and tooltips.
//
// demo uses webpack to manage dependencies and build
import React, { useState, useRef, useEffect } from "react";
import { render } from "react-dom";
import { Chart, Timebar } from "react-keylines";
import { LeftPanel, RightPanel } from "react-demo";
import KeyLines from "keylines";

const Tooltip = ({ tooltipState }) => {
  return (
    <span
      id="tooltip"
      className={tooltipState.tooltipClass}
      style={{ left: tooltipState.left, top: tooltipState.top }}
    >
      <div className="arrow"></div>
      <table>
        <tbody>
          <tr>
            <td className="table-cell">
              <b>Appointed on: </b>
            </td>
            <td>{tooltipState.start}</td>
          </tr>
          <tr>
            <td className="table-cell">
              <b>Resigned on: </b>
            </td>
            <td>{tooltipState.end}</td>
          </tr>
        </tbody>
      </table>
    </span>
  );
};

const ReactDemo = () => {
  // data is a global variable stored in reactchartfilter-data.js
  const [state, setState] = useState(data);

  const [handMode, setHandMode] = useState(true);
  const [timebarSelection, setTimebarSelection] = useState([]);
  const [tooltipState, setTooltipState] = useState({
    start: "",
    end: "",
    left: "",
    top: "",
    tooltipClass: "hidden",
  });

  // here we save the reference to the chart and time bar so we can call KeyLines' methods on them
  const chart = useRef(null);
  const timebar = useRef(null);

  const greyColours = ["rgb(105, 105, 105)", "rgb(192, 192, 192)"];

  // only styling the first 3 selected items as the timebar can only show three selection lines
  const selectionColours = [
    ["#9600d5", "#d0a3cb"],
    ["#0044ff", "#6b93ff"],
    ["#ff0000", "#ff9e9e"],
  ];

  const updateHandMode = ({ id, preventDefault }) => {
    if (id === "_toggleMode") {
      preventDefault();
      setHandMode(!handMode);
    }
  };

  const toggleTooltip = ({ id, x, y }) => {
    const getDateFromTimestamp = (timestamp) => {
      return timestamp ? new Date(timestamp).toDateString().slice(4) : "n/a";
    };

    if (chart.current) {
      const item = id ? chart.current.getItem(id) : null;
      const viewWidth = chart.current.viewOptions().width;

      let newTooltipState = {};

      if (item && item.type === "link") {
        const timebarItem = data.items.filter((tbItem) => {
          if (tbItem.id === item.id) {
            return tbItem;
          }
        });
        newTooltipState.start = getDateFromTimestamp(timebarItem[0].dt[0].dt1);
        newTooltipState.end = getDateFromTimestamp(timebarItem[0].dt[0].dt2);

        // style tooltip to left of cursor if it's x position + width exceeds
        // the remaining chart space.
        if (viewWidth && viewWidth > x + 250) {
          newTooltipState.top = `${y - 24}px`;
          newTooltipState.left = `${x + 22}px`;
          newTooltipState.tooltipClass = "";
        } else {
          newTooltipState.top = `${y - 24}px`;
          newTooltipState.left = `${x - 218}px`;
          newTooltipState.tooltipClass = "right";
        }
      } else {
        newTooltipState.tooltipClass = "hidden";
      }

      setTooltipState(newTooltipState);
    }
  };

  // filter the items on the chart according to the range of the timebar
  const onTimebarChange = () => {
    // if all our components are loaded
    if (chart.current && timebar.current) {
      // filter the chart to show only items in the new range
      chart.current
        .filter(timebar.current.inRange, { animate: false, type: "link" })
        .then(() => {
          // and then adjust the chart's layout
          chart.current.layout("organic", {
            time: 500,
            mode: "adaptive",
            easing: "linear",
          });
        });
    }
  };

  const buildItemStyling = (item, width, colour, border = false) => {
    if (item.type === "node") {
      return {
        id: item.id,
        fi: {
          c: colour,
          t: item.d.type === "person" ? "fas fa-user" : "fas fa-building",
        },
        b: border ? colour : null,
      };
    }
    // else it's a link
    return { id: item.id, w: width || 4, c: colour };
  };

  const highlightItemsOnSelection = () => {
    const timebarSelection = [];
    const chartProperties = {};

    // set default colouring
    chart.current.each({ type: "all" }, (item) => {
      chartProperties[item.id] = buildItemStyling(
        item,
        3,
        item.type === "node" ? greyColours[0] : greyColours[1]
      );
    });

    let selectedIds = chart.current.selection();
    if (selectedIds) {
      // prevent the selection of more than 3 items as the timebar can only show three selection lines
      if (selectedIds.length > selectionColours.length) {
        selectedIds = selectedIds.slice(0, selectionColours.length);
        chart.current.selection(selectedIds);
      }

      selectedIds.forEach((id, index) => {
        let neighbouringNodes = [];
        let links = [];
        const item = chart.current?.getItem(id);
        const colour =
          index < selectionColours.length
            ? selectionColours[index][0]
            : greyColours[1];
        const linkColour = selectionColours[index][1];

        if (item && item.type === "node") {
          // all: true - applies styles to hidden nodes + links not in current time range
          const neighbours = chart.current
            ?.graph()
            .neighbours(id, { all: true });
          if (neighbours && neighbours.links) {
            links = neighbours.links;
            neighbouringNodes = neighbours.nodes;
          }

          // colour node
          chartProperties[id] = buildItemStyling(item, 3, colour, true);
          links.forEach((link) => {
            const linkItem = chart.current?.getItem(link);
            chartProperties[link] = buildItemStyling(linkItem, 5, linkColour);
          });
        } else if (item && item.type === "link") {
          links.push(id);
          neighbouringNodes.push(item.id1, item.id2);

          // colour link
          chartProperties[id] = buildItemStyling(item, 5, colour);
        }
        // colour neighbour nodes
        neighbouringNodes.forEach((neighbourId) => {
          if (
            chartProperties[neighbourId].fi.c === greyColours[0] &&
            index < selectionColours.length
          ) {
            chartProperties[neighbourId] = buildItemStyling(
              chart.current?.getItem(neighbourId),
              3,
              selectionColours[index][1]
            );
          }
        });
        // and select in the timebar
        timebarSelection.push({
          id: links,
          index,
          c: colour,
        });
      });

      setTimebarSelection(timebarSelection);
      chart.current.setProperties(
        Object.keys(chartProperties).map((key) => chartProperties[key])
      );
    }
  };

  // get a reference to the loaded timebar
  const loadedTimebar = (newTimebar) => {
    timebar.current = newTimebar;
    timebar.current.mark([
      {
        dt1: new Date("01 Jan 2018 01:00:00"),
        dt2: new Date("01 Jan 2050 01:00:00"),
      },
    ]);
  };
  // get a reference to the loaded chart
  const loadedChart = (newChart) => {
    chart.current = newChart;
  };

  const loadFontIcons = () => {
    let newItems = [];
    state.items.forEach((item) => {
      if (item.type === "node") {
        newItems = [
          ...newItems,
          {
            ...item,
            fi: {
              c: greyColours[0],
              t: item.d.type === "person" ? "fas fa-user" : "fas fa-building",
            },
          },
        ];
      } else {
        newItems.push(item);
      }
    });

    setState({ ...state, items: newItems });
  };

  useEffect(() => {
    document.fonts.load('24px "Font Awesome 5 Free"').then(loadFontIcons);
  }, []);

  return (
    <>
      <LeftPanel name="reactchartfilter">
        <Tooltip tooltipState={tooltipState} />
        <Chart
          ready={loadedChart}
          data={state}
          animateOnLoad={true}
          options={{
            logo: { u: "/images/Logo.png" },
            handMode,
            iconFontFamily: "Font Awesome 5 Free",
            selectionColour: "#35495E",
            hover: 0,
            selectedNode: {
              fbc: "rgba(0,0,0,0)",
            },
            selectedLink: {
              fbc: "rgba(0,0,0,0)",
            },
          }}
          containerClassName="klchart klchart-timebar"
          selection-change={highlightItemsOnSelection}
          hover={toggleTooltip}
          drag-move={toggleTooltip}
          click={updateHandMode}
        />
        <Timebar
          ready={loadedTimebar}
          data={state}
          selection={timebarSelection}
          change={onTimebarChange}
          animateOnLoad={true}
          options={{
            histogram: {
              colour: "#61dbfb",
              highlightColour: "#3e8496",
              markColour: "rgb(192, 192, 192)",
              markHiColour: "rgb(105, 105, 105)",
            },
            playSpeed: 30,
          }}
          containerClassName="kltimebar"
        />
      </LeftPanel>
      <RightPanel
        name="reactchartfilter"
        title="React Integration"
        description="Use React and the time bar to filter chart items."
      >
        <fieldset>
          <legend>Interaction</legend>
          <ul>
            <li>Use the time bar controls to see changes over time</li>
            <li>
              Hover/click a link to to show the duration of an individual's
              directorship
            </li>
            <li>
              Multi-select up to three items to highlight their neighbours
            </li>
          </ul>
        </fieldset>
        <fieldset>
          <legend>Data Format</legend>
          <p>
            The time bar and chart data formats are similar, so you can pass the
            same data object to both components.
          </p>
        </fieldset>
      </RightPanel>
    </>
  );
};

// render our top-level component into the DOM
render(<ReactDemo />, document.querySelector(".chart-wrapper"));