text: "use strict";
  
  /* global require */
  
  const defined = require("terriajs-cesium/Source/Core/defined").default;
  const DeveloperError = require("terriajs-cesium/Source/Core/DeveloperError")
    .default;
  
  const Chart = require("./Chart/Chart");
  const ChartExpandAndDownloadButtons = require("./Chart/ChartExpandAndDownloadButtons");
  const Collapsible = require("./Collapsible/Collapsible");
  const CustomComponents = require("./CustomComponents");
  const CustomComponentType = require("./CustomComponentType");
  const TableStructure = require("../../Map/TableStructure");
  const VarType = require("../../Map/VarType");
  const Icon = require("../Icon");
  const GLYPHS = require("../Icon").GLYPHS;
  
  const React = require("react");
  
  import ChartPreviewStyles from "./Chart/chart-preview.scss";
  
  const chartAttributes = [
    "src",
    "src-preview",
    "sources",
    "source-names",
    "downloads",
    "download-names",
    "preview-x-label",
    "data",
    "id",
    "x-column",
    "y-column",
    "y-columns",
    "colors",
    "column-names",
    "column-units",
    "styling",
    "highlight-x",
    "poll-seconds",
    "poll-sources",
    "poll-id-columns",
    "poll-replace",
    "title",
    "can-download",
    "hide-buttons"
  ];
  
  /**
   * @private
   */
  function splitStringIfDefined(string) {
    return defined(string) ? string.split(",") : undefined;
  }
  
  /**
   * Registers custom component types.
   *
   * Here we define the following:
   * - <chart>
   * - <collapsible>
   * You can define your own by replacing this file with your own version.
   *
   *
   * <collapsible> displays a collapsible section (see Collapsible.jsx) around its children components.
   * It has two allowed attributes:
   * - title:          The title of the section.
   * - [open]:         true or false (the default).
   *
   *
   * <chart> displays an interactive chart (see Chart.jsx), along with "expand" and "download" buttons (ChartExpandAndDownloadButtons.jsx).
   * This button enables a catalog item based on the data, for display in the Chart Panel (ChartPanel.jsx).
   * It also detects if it appears in the second column of a <table> and, if so, rearranges itself to span two columns.
   *
   * It can have the following attributes. Currently URLs must point to csv (not json) data; but inline json data is supported.
   * Note if you change any of these, also update the chartAttributes array above, or they won't make it here.
   *
   * - [title]:        The title of the chart.  If not supplied, defaults to the name of the context-supplied feature, if available, or else simply "Chart".
   * - [x-column]:     The x column name or number to show in the preview, if not the first appropriate column. NOT FULLY IMPLEMENTED YET.
   * - [y-column]:     The y column name or number to show in the preview, if not the first scalar column.
   * - [y-columns]:    Comma-separated list of y column names or numbers to show in the preview. Overrides "y-column" if provided.
   * - [colors]:       Comma-separated list of css colors to apply to data columns.
   * - [column-names]: Comma-separated list of column names to override those in the source data; empty strings retain the original column name.
   *                   Eg. column-names="Time,Height,Speed"
   * - [column-units]: Comma-separated list of the units for each column. Empty strings are ok.
   *                   Eg. column-units=",m,km/h"
   * - [preview-x-label]: The preview chart x-axis label. Defaults to empty string. Eg. long-names="Last 24 hours,Last 5 days,Time".
   * - [id]:           An id for the chart; give different charts from the same feature different ids. The actual catalogItem.id used for the expanded chart will
   *                   also incorporate the chart title and the catalog item name it came from.
   * - [styling]:      Defaults to 'feature-info'. Can also be 'histogram'. TODO: improve.
   * - [highlight-x]:  An x-coordinate to highlight.
   * - [poll-seconds]: If present, the chart is updated from [poll-sources] every [poll-seconds] seconds.
   *                   TODO: Returned data is merged into existing data and shown.
   * - [poll-sources]: Comma-separated list of URLs to poll every [poll-seconds] seconds. Defaults to sources.
   * - [poll-replace]: Either 'true' or 'false' (case sensitive). Pass 'true' to completely replace the data, 'false' to update
   *                   the existing data. Defaults to false (updating).
   * - [can-download]: 'false' to hide the Download button on the chart.  By default true and for any other value, the download button is shown.
   * - [hide-buttons]: 'true' to hide the Expand and Download buttons on the chart.  By default and for any other value, the buttons are shown when applicable.
   *                   Overrides can-download.
   *
   * Provide the data in one of these four ways:
   * - [sources]:      Comma-separated URLs for data at each available time range. The first in the list is shown in the feature info panel preview.
   *                   Eg. sources="http://example.com/series?offset=1d,http://example.com/series?offset=5d,http://example.com/series?all"
   * - [source-names]: Comma-separated display names for each available time range, used in the expand-chart dropdown button.
   *                   Eg. source-names="1d,5d,30d".
   * - [downloads]:    Same as sources, but for download only. Defaults to the same as sources.
   *                   Eg. sources="http://example.com/series?offset=1d,http://example.com/series?offset=5d,http://example.com/series?all"
   * - [download-names]: Same as source-names, but for download only. Defaults to the same as source-names.
   *                   Eg. source-names="1d,5d,30d,max".
   * Or:
   * - [src]:          The URL of the data to show in the chart panel, once "expand" is clicked. Eg. src="http://example.com/full_time_series.csv".
   * - [src-preview]:  The URL of the data to show in the feature info panel. Defaults to src. Eg. src-preview="http://example.com/preview_time_series.csv".
   * Or:
   * - [data]:         csv-formatted data, with \n for newlines. Eg. data="time,a,b\n2016-01-01,2,3\n2016-01-02,5,6".
   *                   or json-formatted string data, with \quot; for quotes, eg. data="[[\quot;a\quot;,\quot;b\quot;],[2,3],[5,6]]".
   * Or:
   * - None of the above, but supply csv or json-formatted data as the content of the chart data, with \n for newlines.
   *                   Eg. <chart>time,a,b\n2016-01-01,2,3\n2016-01-02,5,6</chart>.
   *                   or  <chart>[["x","y","z"],[1,10,3],[2,15,9],[3,8,12],[5,25,4]]</chart>.
   *
   *
   * See CustomComponentType for more details.
   */
  const registerCustomComponentTypes = function(terria) {
    /**
     * @private
     */
    function processChartNode(context, node, children) {
      checkAllPropertyKeys(node.attribs, chartAttributes);
      const columnNames = splitStringIfDefined(node.attribs["column-names"]);
      const columnUnits = splitStringIfDefined(node.attribs["column-units"]);
      const styling = node.attribs["styling"] || "feature-info";
  
      // Present src and src-preview as if they came from sources.
      let sources = splitStringIfDefined(node.attribs.sources);
      const sourceNames = splitStringIfDefined(node.attribs["source-names"]);
      if (!defined(sources) && defined(node.attribs.src)) {
        // [src-preview, src], or [src] if src-preview is not defined.
        sources = [node.attribs.src];
        if (defined(node.attribs["src-preview"])) {
          sources.unshift(node.attribs["src-preview"]);
        }
      }
      const downloads = splitStringIfDefined(node.attribs.downloads) || sources;
      const downloadNames =
        splitStringIfDefined(node.attribs["download-names"]) || sourceNames;
      const pollSources = splitStringIfDefined(node.attribs["poll-sources"]);
  
      const id = node.attribs.id;
      const xColumn = node.attribs["x-column"];
      let yColumns = splitStringIfDefined(node.attribs["y-columns"]);
      if (!defined(yColumns) && defined(node.attribs["y-column"])) {
        yColumns = [node.attribs["y-column"]];
      }
      const url = defined(sources) ? sources[0] : undefined;
      const tableStructure = tableStructureFromStringData(
        getSourceData(node, children)
      );
  
      const colors = splitStringIfDefined(node.attribs["colors"]);
      var etiqueta = context.feature.data.properties.ETIQUETA;
      const title = etiqueta || node.attribs["title"];
      const updateCounterKeyProps = {
        url: url,
        xColumn: xColumn,
        yColumns: yColumns
      };
      const updateCounter = CustomComponents.getUpdateCounter(
        context.updateCounters,
        Chart,
        updateCounterKeyProps
      );
  
      // If any of these attributes change, change the key so that React knows to re-render the chart.
      const reactKeys = [
        title || "",
        id || "",
        (sources && sources.join("|")) || "",
        xColumn || "",
        defined(yColumns) ? yColumns.join("|") : "",
        colors || ""
      ];
  
      const chartElements = [];
      if (node.attribs["hide-buttons"] !== "true") {
        chartElements.push(
          React.createElement(ChartExpandAndDownloadButtons, {
            key: "button",
            terria: terria,
            catalogItem: context.catalogItem,
            title: title,
            colors: colors, // The colors are used when the chart is expanded.
            feature: context.feature,
            sources: sources,
            sourceNames: sourceNames,
            downloads: downloads,
            downloadNames: downloadNames,
            tableStructure: tableStructure,
            columnNames: columnNames,
            columnUnits: columnUnits,
            xColumn: node.attribs["x-column"],
            yColumns: yColumns,
            id: id,
            canDownload: !(node.attribs["can-download"] === "false"),
            raiseToTitle: !!getInsertedTitle(node),
            pollSources: pollSources,
            pollSeconds: node.attribs["poll-seconds"],
            pollReplace: node.attribs["poll-replace"] === "true",
            updateCounter: updateCounter // Change this to trigger an update.
          })
        );
      }
  
      chartElements.push(
        React.createElement(Chart, {
          key: "chart",
          axisLabel: {
            x: node.attribs["preview-x-label"],
            y: undefined
          },
          catalogItem: context.catalogItem,
          url: url,
          tableStructure: tableStructure,
          xColumn: node.attribs["x-column"],
          yColumns: yColumns,
          styling: styling,
          highlightX: node.attribs["highlight-x"],
          // colors: colors,  // Note that the preview chart doesn't show the colors.
          pollUrl: defined(pollSources) ? pollSources[0] : undefined,
          pollSeconds: node.attribs["poll-seconds"], // This is unorthodox: this prop is picked up not by Chart.jsx, but in selfUpdateSeconds below.
          // pollIdColumns: node.attribs['poll-id-columns'],  // TODO: implement.
          // pollReplace: (node.attribs['poll-replace'] === 'true'),
          updateCounter: updateCounter,
          transitionDuration: 300
        })
      );
  
      return React.createElement(
        "div",
        {
          key: reactKeys.join("-") || "chart-wrapper",
          className: ChartPreviewStyles.previewChartWrapper
        },
        chartElements
      );
    }
  
    /**
     * Returns the 'data' attribute if available, otherwise the child of this node.
     * @private
     */
    function getSourceData(node, children) {
      const sourceData = node.attribs["data"];
      if (sourceData) {
        return sourceData;
      }
      if (Array.isArray(children) && children.length > 0) {
        return children[0];
      }
      return children;
    }
  
    /**
     * This function does not activate any columns in itself.
     * That should be done by TableCatalogItem when it is created around this.
     * @private
     */
    function tableStructureFromStringData(stringData) {
      // sourceData can be either json (starts with a '[') or csv format (contains a true line feed or '\n'; \n is replaced with a real linefeed).
      if (!defined(stringData) || stringData.length < 2) {
        return;
      }
      // We prevent ALT, LON and LAT from being chosen, since we know this is a non-geo csv already.
      const result = new TableStructure("chart", {
        unallowedTypes: [VarType.ALT, VarType.LAT, VarType.LON]
      });
      if (stringData[0] === "[") {
        // Treat as json.
        const json = JSON.parse(stringData.replace(/&quot;/g, '"'));
        return TableStructure.fromJson(json, result);
      }
      if (stringData.indexOf("\\n") >= 0 || stringData.indexOf("\n") >= 0) {
        // Treat as csv.
        return TableStructure.fromCsv(stringData.replace(/\\n/g, "\n"), result);
      }
    }
  
    /**
     * @private
     */
    function getInsertedTitle(node) {
      // Check if there is a title in the position 'Title' relative to node <chart>:
      // <tr><td>Title</td><td><chart></chart></tr>
      if (
        defined(node.parent) &&
        node.parent.name === "td" &&
        defined(node.parent.parent) &&
        node.parent.parent.name === "tr" &&
        defined(node.parent.parent.children[0]) &&
        defined(node.parent.parent.children[0].children[0])
      ) {
        return node.parent.parent.children[0].children[0].data;
      }
    }
  
    const chartComponentType = new CustomComponentType({
      name: "chart",
      attributes: chartAttributes,
      processNode: processChartNode,
      furtherProcessing: [
        //
        // These replacements reformat <chart>s defined directly in a csv, so they take the full width of the 2-column table,
        // and present the column name as the title.
        // It replaces:
        // <tr><td>Title</td><td><chart></chart></tr>
        // with:
        // <tr><td colSpan:2><div class="chart-title">Title</div><chart></chart></tr>
        //
        {
          shouldProcessNode: node =>
            // If this node is a <chart> in the second column of a 2-column table,
            // then add a title taken from the first column, and give it colSpan 2.
            node.name === "td" &&
            node.children.length === 1 &&
            node.children[0].name === "chart" &&
            node.parent.name === "tr" &&
            node.parent.children.length === 2,
          // eslint-disable-next-line react/display-name
          processNode: (context, node, children) => {
            const title = node.parent.children[0].children[0].data;
            const revisedChildren = [
              React.createElement(
                "div",
                {
                  key: "title",
                  className: ChartPreviewStyles.chartTitleFromTable
                },
                title
              )
            ].concat(children);
            return React.createElement(
              node.name,
              { key: "chart", colSpan: 2, className: ChartPreviewStyles.chartTd },
              node.data,
              revisedChildren
            );
          }
        },
        {
          shouldProcessNode: node =>
            // If this node is in the first column of a 2-column table, and the second column is a <chart>,
            // then remove it.
            node.name === "td" &&
            node.children.length === 1 &&
            node.parent.name === "tr" &&
            node.parent.children.length === 2 &&
            node.parent.children[1].name === "td" &&
            node.parent.children[1].children.length === 1 &&
            node.parent.children[1].children[0].name === "chart",
          processNode: function() {
            return; // Do not return a node.
          }
        }
      ],
      /*
       * isCorresponding is a function which checks a ReactComponent and returns a Boolean,
       * indicating if that react component corresponds to this type.
       * "Correspondence" is whatever the component wants it to be, but must be consistent with selfUpdateSeconds.
       */
      isCorresponding: function(reactComponent) {
        return reactComponent.type === Chart;
      },
      selfUpdateSeconds: function(reactComponent) {
        return reactComponent.props.pollSeconds; // Note this is unorthodox.
      }
    });
    if (!defined(terria)) {
      // The chart expand button needs a reference to the Terria instance to add the chart to the catalog.
      throw new DeveloperError(
        "Terria is a required argument of registerCustomComponentTypes."
      );
    }
    CustomComponents.register(chartComponentType);
  
    const collapsibleComponentType = new CustomComponentType({
      name: "collapsible",
      attributes: ["title", "open"],
      processNode: function(context, node, children) {
        return React.createElement(
          Collapsible,
          {
            key: node.attribs.title,
            displayName: node.attribs.title,
            title: node.attribs.title,
            startsOpen:
              typeof node.attribs.open === "string"
                ? JSON.parse(node.attribs.open)
                : undefined
          },
          children
        );
      }
    });
    CustomComponents.register(collapsibleComponentType);
  
    const iconComponentType = new CustomComponentType({
      name: "icon",
      attributes: ["glyph", "className"],
      processNode: function(context, node, children) {
        const badGlyphName = node.attribs.glyph.split("Icon.GLYPHS.")[1];
        const goodGlyphName = badGlyphName.substring(0, badGlyphName.length - 1);
        return React.createElement(
          Icon,
          {
            displayName: "Icon",
            glyph: GLYPHS[goodGlyphName],
            className: node.attribs.classname
          },
          children
        );
      }
    });
    CustomComponents.register(iconComponentType);
  };
  
  /**
   * @private
   */
  function checkAllPropertyKeys(object, allowedKeys) {
    for (const key in object) {
      if (object.hasOwnProperty(key)) {
        if (allowedKeys.indexOf(key) === -1) {
          console.log("Unknown attribute " + key);
          throw new DeveloperError("Unknown attribute " + key);
        }
      }
    }
  }
  
  module.exports = registerCustomComponentTypes;
  