/**
 * @license
 * Copyright (c) 2014, 2024, Oracle and/or its affiliates.
 * Licensed under The Universal Permissive License (UPL), Version 1.0
 * as shown at https://oss.oracle.com/licenses/upl/
 * @ignore
 */
 
import { h } from "preact";
import "ojs/ojlabel";
import "ojs/ojselectsingle";
import { ojSelectSingle } from "ojs/ojselectsingle";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojchart";
import { ojChart } from "ojs/ojchart";

type ChartType = {
  id: number;
  value: string;
  label: string;
};

const chartTypeData = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
];

const chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType> =
  new MutableArrayDataProvider(chartTypeData, { keyAttributes: "value" });

type ChartItem = {
  id: number;
  series: string;
  group: string;
  value: number;
};

const chartData = [
  { id: 0, series: "Baseball", group: "Group A", value: 42 },
  { id: 1, series: "Baseball", group: "Group B", value: 34 },
  { id: 2, series: "Bicycling", group: "Group A", value: 55 },
  { id: 3, series: "Bicycling", group: "Group B", value: 30 },
  { id: 4, series: "Skiing", group: "Group A", value: 36 },
  { id: 5, series: "Skiing", group: "Group B", value: 50 },
  { id: 6, series: "Soccer", group: "Group A", value: 22 },
  { id: 7, series: "Soccer", group: "Group B", value: 46 },
];

const chartDataProvider: MutableArrayDataProvider<ChartItem["id"], ChartItem> =
  new MutableArrayDataProvider(chartData, { keyAttributes: "id" });

export function Content() {

  const chartItem = (
    item: ojChart.ItemTemplateContext<ChartItem["id"], ChartItem>
  ) => {
    return (
      <oj-chart-item
        value={item.data.value}
        groupId={[item.data.group]}
        seriesId={item.data.series}></oj-chart-item>
    );
  };

  return (
    <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <h1>Product Information</h1>
      <div id="itemDetailsContainer">
        <oj-label for="basicSelect">Select Chart:</oj-label>
        <oj-select-single
          id="basicSelect"
          value="pie"
          class="selectSingleStyle"
          data={chartTypesDP}
        ></oj-select-single>
        <oj-chart
          id="barChart"
          type="bar"
          data={chartDataProvider}
          animationOnDisplay="auto"
          animationOnDataChange="auto"
          hoverBehavior="dim"
          class="chartStyle"
        ><template slot="itemTemplate" render={chartItem}></template></oj-chart>
      </div>
    </div>
  );
}