const [
  Point,
  Graphic

] = await $arcgis.import([
  "@arcgis/core/geometry/Point.js",
  "@arcgis/core/Graphic.js"

]);

// Calcite Web を使用した DOM 要素
const processLoader = document.getElementById("processLoader");
const errorPanel = document.getElementById("errorPanel");

// Scene 要素を取得
const sceneEl = document.querySelector("arcgis-scene");

await sceneEl.viewOnReady();

// エラー通知の表示位置を指定（CSS で display="none" と設定しているため、画面には表示されません）
sceneEl.view.ui.add(errorPanel, "bottom");

// 観測点を描画するためのマーカー シンボル
const markerSym = {
  type: "simple-marker",
  size: "14px",
  color: [240, 145, 153],
  outline: null
}

// 結果を描画するためのポリゴン シンボル
const fillSym = {
  type: "simple-fill",
  color: [255, 255, 0, 0.5],
  outline: null
}

/*
  ステップ：ジオプロセッサーの準備
*/


/*
  ステップ：空間参照の設定
*/


// シーンのクリックで観測点の追加 / ジオプロセッサーの実行
sceneEl.addEventListener("arcgisViewClick", executeViewshedTask)

function executeViewshedTask(evt) {
  // グラフィックス レイヤーの初期化
  sceneEl.graphics.removeAll();
  
  // クリック地点の情報から、ジオメトリを作成
  const pointGeom = new Point({
    longitude: evt.detail.mapPoint.longitude,
    latitude: evt.detail.mapPoint.latitude
  });
  // 観測点をシーンに追加
  const inputPoint = new Graphic({
    geometry: pointGeom,
    symbol: markerSym
  });
  sceneEl.graphics.add(inputPoint);

  /*
    ステップ：1 つ目の入力パラメーターの準備
  */    


  /*
    ステップ：2 つ目の入力パラメーターの準備
  */

    
  /*
    ステップ：JSON 形式のオブジェクトでジオプロセッサーの入力パラメーターを作成
  */


  /*
    ステップ：ローディング パネルの表示
  */
  // processLoader.style.display = "inline";

  /*
    ステップ：ジオプロセッサーの実行
  */


}

function drawResult(gpResults) {
  /*
    ステップ：結果からフィーチャの配列を取得
  */


  /*
    ステップ：結果をループして各フィーチャにシンボルを定義して追加
  */


  // 検索結果にズーム
  sceneEl.goTo({
    target: viewshedGraphics,
    scale: sceneEl.scale,
    tilt: sceneEl.cameraTilt
  }, {
    duration: 1000
  });

  /*
    ステップ：ローディング パネルの非表示
  */
  // processLoader.style.display = "none";


}

function errorFunc() {
  processLoader.style.display = "none";
  errorPanel.style.display = "inline";
}
