//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//     Sample Code
//!    Use Angular to create time bar and chart with font icons and tooltips.

// This demo uses webpack to manage dependencies and build

import KeyLines from "keylines";

import "core-js";
import "zone.js";

import { OnInit } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from "@angular/platform-browser";
import { NgModule, enableProdMode, Component } from "@angular/core";

import type {
  Chart,
  TimeBar,
  TimeBarOptions,
  ChartOptions,
  ChartAllEventProps,
  ChartPointerEventProps,
  SelectionOptions,
  LayoutOptions,
  TimeBarAllEventProps,
} from "keylines";

// import the KeyLines components
import {
  KlComponent,
  KlComponents,
  KlComponentsService,
} from "angular/angular-keylines";
import { LeftPanel, RightPanel } from "angular/angular-demo";

import { chartData, timebarData } from "./angularchartfilter-data";

// enable production mode
enableProdMode();

interface Events {
  name: string;
  args: ChartAllEventProps | TimeBarAllEventProps;
}

export class Tooltip {
  constructor(
    public start: string,
    public end: string,
    public left: string,
    public top: string,
    public tooltipClass: string,
    public arrowClass: string
  ) {}
}

@Component({
  selector: "kl-container",
  template: `
    <div class="chart-wrapper demo-cols">
      <kl-leftPanel class="flex1">
        <span
          #ngTooltip
          id="tooltip"
          class="{{ this.model.tooltipClass }}"
          [style.left]="this.model.left"
          [style.top]="this.model.top"
        >
          <div class="{{ this.model.arrowClass }}"></div>
          <tr>
            <td class="table-cell"><b>Appointed on: </b></td>
            <td>{{ this.model.start }}</td>
          </tr>
          <tr>
            <td class="table-cell"><b>Resigned on: </b></td>
            <td>{{ this.model.end }}</td>
          </tr>
        </span>
        <div id="lhsVisual" class="toggle-content is-visible">
          <kl-components (klReady)="klChartReady($event)">
            <kl-component
              class="flex1"
              klType="chart"
              klContainerClass="klchart klchart-timebar"
              [klOptions]="chartOptions"
              (klEvents)="klChartEvents($event)"
            >
            </kl-component>
            <kl-component
              klType="timebar"
              klContainerClass="kltimebar"
              [klOptions]="timebarOptions"
              (klEvents)="klTimebarEvents($event)"
            >
            </kl-component>
          </kl-components>
        </div>
        <div id="lhsSource" class="toggle-content">
          <iframe
            id="sourceView"
            style="width: 100%; height: 100%; border: none;"
            src="source-angularchartfilter.js.htm"
            scrolling="no"
          ></iframe>
        </div>
      </kl-leftPanel>
      <kl-rightPanel
        name="angularchartfilter"
        title="Angular Integration: Time"
        description="Use Angular 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 data format is similar to that used for the chart. It
            is possible to pass the same data object to both components.
          </p>
        </fieldset>
      </kl-rightPanel>
    </div>
  `,
  styleUrls: ["angularchartfilter.css"],
})
export class ChartFilterComponent implements OnInit {
  private chart?: Chart;
  private timebar?: TimeBar;
  // Define some options for the chart
  public chartOptions: ChartOptions = {
    logo: { u: "/images/Logo.png" },
    overview: { icon: false, shown: false },
    iconFontFamily: "Font Awesome 5 Free",
    handMode: true,
    hover: 0,
    selectedNode: {
      fbc: "rgba(0,0,0,0)",
    },
    selectedLink: {
      fbc: "rgba(0,0,0,0)",
    },
  };
  // Define some options for the timebar
  public timebarOptions: TimeBarOptions = {
    histogram: {
      colour: "#E64669",
      highlightColour: "#DD0031",
      markColour: "rgb(192, 192, 192)",
      markHiColour: "rgb(105, 105, 105)",
    },
  };

  model = new Tooltip("", "", "", "", "hidden", "arrow");
  marks = [
    {
      dt1: new Date("01 Jan 2018 01:00:00"),
      dt2: new Date("01 Jan 2050 01:00:00"),
    },
  ];
  greyColours = ["rgb(105, 105, 105)", "rgb(192, 192, 192)"];

  // only style the first 3 selections
  selectionColours = [
    ["#9600d5", "#d0a3cb"],
    ["rgb(0, 191, 255)", "#8dd8f8"],
    ["rgb(50,205,50)", "#afdaae"],
  ];

  ngOnInit() {
    document.fonts.load('24px "Font Awesome 5 Free"');
  }

  klChartReady([chart, timebar]: [Chart, TimeBar]) {
    this.chart = chart;
    this.timebar = timebar;

    chartData.items.forEach((element) => {
      if (element.type === "node") {
        element.fi = {
          c: this.greyColours[0],
          t: element.d.type === "person" ? "fas fa-user" : "fas fa-building",
        };
      }
    });

    this.chart.load(chartData);
    this.timebar.load(timebarData);
    this.timebar.mark(this.marks);

    this.chart.zoom("fit");
    this.timebar.zoom("fit");
  }

  // will receive events for the timebar
  klTimebarEvents({ name }: Events) {
    if (name === "change") {
      this.onTimebarChange();
    }
  }

  // will receive events for the chart
  klChartEvents({ name, args }: Events) {
    if (name === "selection-change" && this.chart?.selection()) {
      this.highlightSelections();
    } else if (
      name === "hover" ||
      name === "pointer-down" ||
      name === "drag-move"
    ) {
      this.toggleTooltip(args as ChartPointerEventProps);
    }
  }

  getDateFromTimestamp(timestamp: number) {
    return timestamp ? new Date(timestamp).toDateString().slice(4) : "n/a";
  }

  toggleTooltip({ id, x, y }: ChartPointerEventProps) {
    if (this.chart) {
      const item = id ? this.chart.getItem(id) : null;
      const viewWidth = this.chart.viewOptions().width;

      if (item && item.type === "link") {
        const timebarItem = timebarData.items.filter(
          (tbItem) => tbItem.id === item.id
        ) as { dt: { dt1: number; dt2: number }[] }[];
        this.model.start = this.getDateFromTimestamp(timebarItem[0].dt[0].dt1);
        this.model.end = this.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) {
          this.model.top = `${y - 24}px`;
          this.model.left = `${x + 22}px`;
          this.model.tooltipClass = "";
        } else {
          this.model.top = `${y - 24}px`;
          this.model.left = `${x - 218}px`;
          this.model.tooltipClass = "right";
        }
      } else {
        this.model.tooltipClass = "hidden";
      }
    }
  }

  buildItemStyling(item: any, width: number, colour: string, 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 is a link
    return { id: item.id, w: width || 4, c: colour };
  }

  highlightSelections() {
    if (!this.chart || !this.timebar) return;

    this.timebar.selection([]);
    const timebarSelection: SelectionOptions[] = [];
    const chartProperties: Record<
      string,
      ReturnType<typeof this.buildItemStyling>
    > = {};
    // set default colouring
    this.chart.each({ type: "all" }, (item) => {
      chartProperties[item.id] = this.buildItemStyling(
        item,
        3,
        item.type === "node" ? this.greyColours[0] : this.greyColours[1]
      );
    });

    let selectedIds = this.chart.selection();

    if (selectedIds) {
      if (selectedIds.length > this.selectionColours.length) {
        selectedIds = selectedIds.slice(0, this.selectionColours.length);
        this.chart.selection(selectedIds);
      }

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

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

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

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

      this.timebar.selection(timebarSelection);
      this.chart.setProperties(
        Object.keys(chartProperties).map((key) => chartProperties[key])
      );
    }
  }

  doLayout() {
    if (!this.chart) return;
    const opts: LayoutOptions = {
      time: 500,
      mode: "adaptive",
      easing: "linear",
      straighten: false,
    };
    this.chart.layout("organic", opts);
  }

  onTimebarChange() {
    if (!this.chart || !this.timebar) return;
    // filter the chart to show only items in the new range
    this.chart.filter(this.timebar.inRange, { animate: false, type: "link" });
    // and then adjust the chart's layout
    this.doLayout();
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [
    ChartFilterComponent,
    KlComponent,
    KlComponents,
    LeftPanel,
    RightPanel,
  ],
  providers: [KlComponentsService],
  bootstrap: [ChartFilterComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);