import { Color } from "three";

import Instance from "@giro3d/giro3d/core/Instance.js";
import ColorMap from "@giro3d/giro3d/core/layer/ColorMap.js";
import PointCloud from "@giro3d/giro3d/entities/PointCloud.js";
import Inspector from "@giro3d/giro3d/gui/Inspector.js";
import PotreeSource from "@giro3d/giro3d/sources/PotreeSource.js";
import { setLazPerfPath } from "@giro3d/giro3d/sources/las/config.js";

function bindColorPicker(id, onChange) {
  const element = document.getElementById(id);
  if (!(element instanceof HTMLInputElement)) {
    throw new Error(
      "invalid binding element: expected HTMLInputElement, got: " +
        element.constructor.name,
    );
  }

  element.oninput = function oninput() {
    // Let's change the classification color with the color picker value
    const hexColor = element.value;
    onChange(new Color(hexColor));
  };

  const externalFunction = (v) => {
    element.value = `#${new Color(v).getHexString()}`;
    onChange(element.value);
  };

  return [externalFunction, new Color(element.value), element];
}

function bindDropDown(id, onChange) {
  const element = document.getElementById(id);
  if (!(element instanceof HTMLSelectElement)) {
    throw new Error(
      "invalid binding element: expected HTMLSelectElement, got: " +
        element.constructor.name,
    );
  }

  element.onchange = () => {
    onChange(element.value);
  };

  const callback = (v) => {
    element.value = v;
    onChange(element.value);
  };

  const setOptions = (options) => {
    const items = options.map(
      (opt) =>
        `<option value=${opt.id} ${opt.selected ? "selected" : ""}>${opt.name}</option>`,
    );
    element.innerHTML = items.join("\n");
  };

  return [callback, element.value, element, setOptions];
}

function bindProgress(id) {
  const element = document.getElementById(id);
  if (!(element instanceof HTMLDivElement)) {
    throw new Error(
      "invalid binding element: expected HTMLDivElement, got: " +
        element.constructor.name,
    );
  }

  const setProgress = (normalized, text) => {
    element.style.width = `${Math.round(normalized * 100)}%`;
    if (text) {
      element.innerText = text;
    }
  };

  return [setProgress, element.parentElement];
}

function bindSlider(id, onChange) {
  const element = document.getElementById(id);
  if (!(element instanceof HTMLInputElement)) {
    throw new Error(
      "invalid binding element: expected HTMLInputElement, got: " +
        element.constructor.name,
    );
  }

  element.oninput = function oninput() {
    onChange(element.valueAsNumber);
  };

  const setValue = (v, min, max, step) => {
    if (min != null && max != null) {
      element.min = min.toString();
      element.max = max.toString();

      if (step != null) {
        element.step = step;
      }
    }
    element.valueAsNumber = v;
    onChange(element.valueAsNumber);
  };

  const initialValue = element.valueAsNumber;

  return [setValue, initialValue, element];
}

function bindToggle(id, onChange) {
  const element = document.getElementById(id);
  if (!(element instanceof HTMLInputElement)) {
    throw new Error(
      "invalid binding element: expected HTMLButtonElement, got: " +
        element.constructor.name,
    );
  }

  element.oninput = function oninput() {
    onChange(element.checked);
  };

  const callback = (v) => {
    element.checked = v;
    onChange(element.checked);
  };

  return [callback, element.checked, element];
}

function formatPointCount(count, numberFormat = undefined) {
  let displayedPointCount = count;
  let suffix = "";

  if (count > 1_000_000) {
    displayedPointCount /= 1_000_000;
    suffix = "M";
  } else if (count > 1_000_000_000) {
    displayedPointCount /= 1_000_000_000;
    suffix = "B";
  }

  if (numberFormat == null) {
    numberFormat = new Intl.NumberFormat(undefined, {
      maximumFractionDigits: 2,
    });
  }

  return numberFormat.format(displayedPointCount) + suffix;
}

function makeColorRamp(
  preset,
  discrete = false,
  invert = false,
  mirror = false,
) {
  let nshades = discrete ? 10 : 256;

  const values = colormap({ colormap: preset, nshades });

  const colors = values.map((v) => new Color(v));

  if (invert) {
    colors.reverse();
  }

  if (mirror) {
    const mirrored = [...colors, ...colors.reverse()];
    return mirrored;
  }

  return colors;
}

function placeCameraOnTop(volume, instance) {
  if (!instance) {
    return;
  }

  const center = volume.getCenter(new Vector3());
  const size = volume.getSize(new Vector3());

  const camera = instance.view.camera;
  const top = volume.max.z;
  const fov = camera.fov;
  const aspect = camera.aspect;

  const hFov = MathUtils.degToRad(fov) / 2;
  const altitude = (Math.max(size.x / aspect, size.y) / Math.tan(hFov)) * 0.5;

  instance.view.camera.position.set(center.x, center.y - 1, altitude + top);
  instance.view.camera.lookAt(center);

  const controls = new MapControls(instance.view.camera, instance.domElement);
  controls.target.copy(center);
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;

  instance.view.setControls(controls);
  instance.notifyChange(instance.view.camera);
}

// Some Potree datasets contain LAZ files.
// LAS processing requires the WebAssembly laz-perf library
// This path is specific to your project, and must be set accordingly.
setLazPerfPath("/assets/wasm");

// We use this CRS when the point cloud does not have a CRS defined.
// It is technically the WebMercator CRS, but we label it 'unknown' to make
// it very explicit that it is not correct.
// See https://gitlab.com/giro3d/giro3d/-/issues/514
Instance.registerCRS(
  "unknown",
  "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs",
);

const options = {
  attribute: "position",
  colorRamp: "greys",
  min: 0,
  max: 100,
};

let entity;

let instance;

function updateActiveAttribute() {
  const attribute = options.attribute;

  entity.setActiveAttribute(attribute);

  const classificationGroup = document.getElementById("classification-group");
  const colorMapGroup = document.getElementById("ramp-group");

  const shouldDisplayClassifications =
    attribute.toLowerCase() === "classification";
  classificationGroup.style.display = shouldDisplayClassifications
    ? "block"
    : "none";
  colorMapGroup.style.display =
    !shouldDisplayClassifications &&
    attribute !== "Color" &&
    attribute !== "COLOR_PACKED"
      ? "flex"
      : "none";

  updateColorMap();
}

const [setProgress, progressElement] = bindProgress("progress");

const [, , , setAvailableAttributes] = bindDropDown(
  "attribute",
  (attribute) => {
    options.attribute = attribute;

    if (entity) {
      updateActiveAttribute();
    }
  },
);

const [setMin] = bindSlider("min", (min) => {
  options.min = Math.round(min);
  if (entity && instance) {
    entity.colorMap.min = min;
    instance.notifyChange(entity);
    document.getElementById("label-bounds").innerHTML =
      `Bounds: <b>${options.min}</b> — <b>${options.max}<b>`;
  }
});

const [setMax] = bindSlider("max", (max) => {
  options.max = Math.round(max);
  if (entity && instance) {
    entity.colorMap.max = max;
    instance.notifyChange(entity);
    document.getElementById("label-bounds").innerHTML =
      `Bounds: <b>${options.min}</b> — <b>${options.max}<b>`;
  }
});

function updateColorMapMinMax() {
  if (!entity) {
    return;
  }

  const min = entity.activeAttribute.min ?? 0;
  const max = entity.activeAttribute.max ?? 255;

  const lowerBound = min;
  const upperBound = max;

  setMin(min, lowerBound, upperBound);
  setMax(max, lowerBound, upperBound);
}

const [, currentRamp] = bindDropDown("ramp", (ramp) => {
  options.colorRamp = ramp;
  updateColorMap();
});

function updateColorMap() {
  if (entity && instance) {
    entity.colorMap.colors = makeColorRamp(options.colorRamp);

    updateColorMapMinMax();

    instance.notifyChange();
  }
}

bindToggle("show-tile-volumes", (v) => {
  entity.showNodeVolumes = v;
});

bindToggle("show-volume", (v) => {
  entity.showVolume = v;
});

bindToggle("edl", (v) => {
  instance.renderingOptions.enableEDL = v;
  instance.notifyChange();
});

bindToggle("inpainting", (v) => {
  instance.renderingOptions.enableInpainting = v;
  instance.renderingOptions.enablePointCloudOcclusion = v;
  instance.notifyChange();
});

bindSlider("point-size", (size) => {
  if (entity) {
    entity.pointSize = size;
    document.getElementById("point-size-label").innerHTML =
      `Point size: <b>${size === 0 ? "auto" : size.toFixed(0)}</b>`;
  }
});
bindSlider("subdivision-threshold", (threshold) => {
  if (entity) {
    entity.subdivisionThreshold = threshold;
    document.getElementById("subdivision-threshold-label").innerHTML =
      `Subdivision threshold: <b>${threshold}</b>`;
  }
});

function populateGUI(entity) {
  document.getElementById("accordion").style.display = "block";

  const tableElement = document.getElementById("table");
  tableElement.style.display = "block";

  progressElement.style.display = "none";
}

const numberFormat = new Intl.NumberFormat(undefined, {
  maximumFractionDigits: 2,
});

function updateDisplayedPointCounts(count, displayed) {
  const pointCountElement = document.getElementById("point-count");
  pointCountElement.innerHTML =
    count != null ? formatPointCount(count, numberFormat) : "unknown";
  pointCountElement.title =
    count != null ? numberFormat.format(count) : "unknown";

  const activePointCountElement = document.getElementById(
    "displayed-point-count",
  );
  activePointCountElement.innerHTML = formatPointCount(displayed, numberFormat);
  activePointCountElement.title = numberFormat.format(displayed);
}

async function load(url) {
  progressElement.style.display = "block";

  const source = new PotreeSource({ url });

  source.addEventListener("progress", () => setProgress(source.progress));

  await source.initialize();

  const metadata = await source.getMetadata();

  let crs = "unknown";
  if (metadata.crs != null) {
    crs = metadata.crs.name;
    Instance.registerCRS(metadata.crs.name, metadata.crs.definition);
  }

  instance = new Instance({
    target: "view",
    crs: crs,
    backgroundColor: null,
    renderer: {
      logarithmicDepthBuffer: true,
    },
  });

  // Let's enable Eye Dome Lighting to make the point cloud more readable.
  instance.renderingOptions.enableEDL = true;
  instance.renderingOptions.EDLRadius = 0.6;
  instance.renderingOptions.EDLStrength = 5;

  entity = new PointCloud({ source });

  try {
    await instance.add(entity);
  } catch (err) {
    if (err instanceof Error) {
      const messageElement = document.getElementById("message");
      messageElement.innerText = err.message;
      messageElement.style.display = "block";
    }
    console.error(err);
    return;
  } finally {
    progressElement.style.display = "none";
  }

  // Create the color map. The color ramp and bounds will be set later.
  entity.colorMap = new ColorMap([], 0, 1);

  instance.addEventListener("update-end", () =>
    updateDisplayedPointCounts(entity.pointCount, entity.displayedPointCount),
  );

  placeCameraOnTop(entity.getBoundingBox(), instance);

  setAvailableAttributes(
    metadata.attributes.map((att, index) => ({
      id: att.name,
      name: att.name,
      selected: index === 0,
    })),
  );

  if (metadata.attributes.length > 0) {
    options.attribute = metadata.attributes[0].name;
    entity.setActiveAttribute(metadata.attributes[0].name);
  }

  // Let's populate the classification list with default values from the ASPRS classifications.
  addClassification(0, "Created, never classified", entity.classifications);
  addClassification(1, "Unclassified", entity.classifications);
  addClassification(2, "Ground", entity.classifications);
  addClassification(3, "Low vegetation", entity.classifications);
  addClassification(4, "Medium vegetation", entity.classifications);
  addClassification(5, "High vegetation", entity.classifications);
  addClassification(6, "Building", entity.classifications);
  addClassification(7, "Low point (noise)", entity.classifications);
  addClassification(8, "Reserved", entity.classifications);
  addClassification(9, "Water", entity.classifications);
  addClassification(10, "Rail", entity.classifications);
  addClassification(11, "Road surface", entity.classifications);
  addClassification(12, "Reserved", entity.classifications);
  addClassification(13, "Wire - Guard (shield)", entity.classifications);
  addClassification(14, "Wire - Conductor (Phase)", entity.classifications);
  addClassification(15, "Transmission Tower", entity.classifications);
  addClassification(
    16,
    "Wire Structure connector (e.g Insulator)",
    entity.classifications,
  );
  addClassification(17, "Bridge deck", entity.classifications);
  addClassification(18, "High noise", entity.classifications);

  bindToggle("show-dataset", (show) => {
    entity.visible = show;
    instance.notifyChange(entity);
  });

  populateGUI(entity);

  updateActiveAttribute();

  Inspector.attach("inspector", instance);
}

const defaultUrl =
  "https://3d.oslandia.com/potree/pointclouds/lion_takanawa/cloud.js";

// Extract dataset URL from URL
const url = new URL(document.URL);
let datasetUrl = url.searchParams.get("dataset");
if (!datasetUrl) {
  datasetUrl = defaultUrl;
  url.searchParams.append("dataset", datasetUrl);
  window.history.replaceState({}, null, url.toString());
}

// GUI controls for classification handling

const classificationNames = new Array(32);

function addClassification(number, name, array) {
  const currentColor = array[number].color.getHexString();

  const template = `
    <div class="form-check">
        <input
            class="form-check-input"
            type="checkbox"
            checked
            role="switch"
            id="class-${number}"
            autocomplete="off"
        />
        <label class="form-check-label w-100" for="class-${number}">
            <div class="row">
                <div class="col" style="font-size: 13px">${name}</div>
                <div class="col-auto">
                    <input
                        type="color"
                        style="height: 1rem; padding: 1px;"
                        class="form-control form-control-color float-end"
                        id="color-${number}"
                        value="#${currentColor}"
                        title="Classification color"
                    />
                </div>
            </div>
        </label>
    </div>
    `;

  const node = document.createElement("div");
  node.innerHTML = template;
  document.getElementById("classifications").appendChild(node);

  // Let's change the classification color with the color picker value
  bindColorPicker(`color-${number}`, (v) => {
    // Parse it into a THREE.js color
    const color = new Color(v);

    array[number].color = color;

    instance.notifyChange();
  });

  classificationNames[number] = name;

  bindToggle(`class-${number}`, (enabled) => {
    // By toggling the .visible property of a classification,
    // all points that have this classification are hidden/shown.
    array[number].visible = enabled;
    instance.notifyChange();
  });
}

load(datasetUrl).catch(console.error);

<!doctype html>
<html lang="en">
  <head>
    <title>Potree Point Cloud</title>
    <meta charset="UTF-8" />
    <meta name="name" content="potree_pointcloud" />
    <meta name="description" content="Display a Potree point cloud." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" href="https://giro3d.org/images/favicon.svg" />
    <link
      href="https://giro3d.org/assets/bootstrap-custom.css"
      rel="stylesheet"
    />
    <script src="https://giro3d.org/assets/bootstrap.bundle.min.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://giro3d.org/next/examples/css/example.css"
    />

    <style>
      #view canvas {
        background: rgb(132, 170, 182);
        background: radial-gradient(
          circle,
          rgba(132, 170, 182, 1) 0%,
          rgba(37, 44, 48, 1) 100%
        );
      }
    </style>
  </head>

  <body>
    <div id="view" class="m-0 p-0 w-100 h-100"></div>
    <div
      id="inspector"
      class="position-absolute top-0 start-0 mh-100 overflow-auto"
    ></div>

    <div class="side-pane-with-status-bar" style="width: 20rem">
      <div class="progress" role="progressbar">
        <div
          class="progress-bar bg-info progress-bar-striped progress-bar-animated text-dark"
          id="progress"
          style="width: 0%"
        >
          Loading metadata...
        </div>
      </div>

      <!-- Error message -->
      <div
        class="alert alert-danger mt-0 mb-0"
        id="message"
        style="display: none"
        role="alert"
      >
        A simple primary alert—check it out!
      </div>

      <!--Parameters -->
      <div class="card-body">
        <!-- Accordion -->
        <div class="accordion" style="display: none" id="accordion">
          <!-- Section: info -->
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#section-info"
                aria-expanded="true"
                aria-controls="section-info"
              >
                Info
              </button>
            </h2>
            <div
              id="section-info"
              class="accordion-collapse collapse show"
              data-bs-parent="#accordion"
            >
              <ul
                class="list-group list-group-flush"
                id="table"
                style="display: none; font-size: 0.875rem"
              >
                <li
                  class="list-group-item"
                  title="The total number of points in the dataset"
                >
                  Total points
                  <b id="point-count" class="d-float float-end"></b>
                </li>
                <li
                  class="list-group-item"
                  title="The number of points currently displayed"
                >
                  Displayed points
                  <b id="displayed-point-count" class="d-float float-end"></b>
                </li>
              </ul>
            </div>
          </div>

          <!-- Section: options -->
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#section-options"
                aria-expanded="false"
                aria-controls="section-options"
              >
                Options
              </button>
            </h2>

            <div
              id="section-options"
              class="accordion-collapse collapse p-2"
              data-bs-parent="#accordion"
            >
              <!-- Show volume -->
              <div class="form-check form-switch">
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="show-volume"
                  autocomplete="off"
                />
                <label
                  title="Show the volume of the dataset"
                  class="form-check-label"
                  for="show-volume"
                  >Show dataset volume</label
                >
              </div>

              <!-- Show octree volumes -->
              <div class="form-check form-switch">
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="show-tile-volumes"
                  autocomplete="off"
                />
                <label
                  title="Show the volumes of the octree cells"
                  class="form-check-label"
                  for="show-tile-volumes"
                  >Show octree volumes</label
                >
              </div>

              <!-- Show basemap -->
              <div
                class="form-check form-switch"
                style="display: none"
                id="basemap-group"
              >
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  checked
                  id="show-basemap"
                  autocomplete="off"
                />
                <label
                  title="Show the basemap"
                  class="form-check-label"
                  for="show-basemap"
                  >Show basemap</label
                >
              </div>

              <!-- Show cloud -->
              <div class="form-check form-switch">
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  checked
                  id="show-dataset"
                  autocomplete="off"
                />
                <label class="form-check-label" for="show-dataset"
                  >Show dataset</label
                >
              </div>

              <!-- Eye Dome Lighting -->
              <div class="form-check form-switch">
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  checked
                  id="edl"
                  autocomplete="off"
                />
                <label
                  title="Toggles Eye Dome Lighting post-processing effect"
                  class="form-check-label"
                  for="edl"
                  >Eye Dome Lighting</label
                >
              </div>

              <!-- Inpainting -->
              <div class="form-check form-switch">
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="inpainting"
                  autocomplete="off"
                />
                <label
                  title="Toggles inpainting"
                  class="form-check-label"
                  for="inpainting"
                  >Inpainting</label
                >
              </div>

              <!-- Point size slider -->
              <label
                for="point-size"
                class="form-label mt-2"
                id="point-size-label"
                >Point size: <b>auto</b></label
              >
              <input
                type="range"
                min="0"
                max="50"
                step="1"
                value="0"
                title="The point size, in pixels"
                class="form-range"
                id="point-size"
                autocomplete="off"
              />

              <!-- Subdivision threshold slider -->
              <label
                for="subdivision-threshold"
                id="subdivision-threshold-label"
                class="form-label"
                >Subdvision threshold: <b>1.0</b></label
              >
              <input
                type="range"
                min="0.1"
                max="3"
                step="0.1"
                value="1"
                title="The subdivision threshold of the point cloud. The lower, the higher the number of points simultaneously displayed."
                class="form-range"
                id="subdivision-threshold"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- Section: coloring -->
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#section-coloring"
                aria-expanded="false"
                aria-controls="section-coloring"
              >
                Coloring
              </button>
            </h2>

            <div
              id="section-coloring"
              class="accordion-collapse collapse p-2"
              data-bs-parent="#accordion"
            >
              <!-- Active attribute selector -->
              <div class="input-group mt-1" id="attribute-group">
                <label class="input-group-text col-5" for="attribute"
                  >Dimension</label
                >
                <select
                  class="form-select"
                  id="attribute"
                  autocomplete="off"
                  title="Sets the active attribute of the point cloud"
                ></select>
              </div>

              <!-- Color ramp selector -->
              <div id="ramp-group" class="input-group mt-2">
                <label class="input-group-text col-5" for="ramp"
                  >Color ramp</label
                >
                <select class="form-select" id="ramp" autocomplete="off">
                  <option value="viridis">Viridis</option>
                  <option value="jet">Jet</option>
                  <option value="greys" selected>Greys</option>
                  <option value="blackbody">Blackbody</option>
                  <option value="earth">Earth</option>
                  <option value="bathymetry">Bathymetry</option>
                  <option value="magma">Magma</option>
                  <option value="par">Par</option>
                  <option value="rdbu">RdBu</option>
                </select>

                <!-- Bound sliders -->
                <div class="input-group border rounded p-2 mt-2" id="bounds">
                  <label
                    for="min"
                    id="label-bounds"
                    class="form-label"
                    style="font-size: 0.8rem"
                    >Bounds: 123 - 456</label
                  >
                  <div class="input-group">
                    <input
                      type="range"
                      min="780"
                      max="3574"
                      value="0"
                      class="form-range"
                      id="min"
                      autocomplete="off"
                    />
                  </div>

                  <div class="input-group">
                    <input
                      type="range"
                      min="780"
                      max="3574"
                      value="3574"
                      class="form-range"
                      id="max"
                      autocomplete="off"
                    />
                  </div>
                </div>
              </div>

              <!-- Classification list -->
              <div id="classification-group" class="mt-2">
                <fieldset id="classifications" class="border rounded p-2">
                  <!-- Classifications are added dynamically from the JS example -->
                </fieldset>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="index.js"></script>
    <script>
      /* activate popovers */
      const popoverTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="popover"]'),
      );
      popoverTriggerList.map(
        // bootstrap is used as script in the template, disable warning about undef
        // eslint-disable-next-line no-undef
        (popoverTriggerEl) =>
          new bootstrap.Popover(popoverTriggerEl, {
            trigger: "hover",
            placement: "left",
            content: document.getElementById(
              popoverTriggerEl.getAttribute("data-bs-content"),
            ).innerHTML,
            html: true,
          }),
      );
    </script>
  </body>
</html>

{
    "name": "potree_pointcloud",
    "dependencies": {
        "@giro3d/giro3d": "git+https://gitlab.com/giro3d/giro3d.git"
    },
    "devDependencies": {
        "vite": "^3.2.3"
    },
    "scripts": {
        "start": "vite",
        "build": "vite build"
    }
}