const [
  FeatureLayer,

] = await $arcgis.import([
  "@arcgis/core/layers/FeatureLayer.js",

]);

// アプリケーションに配置される button 要素の click イベントのハンドリング
const sketchBtn = document.getElementById("sketchBtn");
sketchBtn.addEventListener("click", drawPolygon);
const resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("click", resetTable);

// マップ エレメントの取得
const mapEl = document.querySelector("arcgis-map");

await mapEl.viewOnReady();

mapEl.view.ui.add(sketchBtn, "bottom-left");

// 出力フィールドの指定
const outFieldsPoints = ["OBJECTID", "CITY_NAME", "POP_CLASS"];

// FeatureLayer（ポイント）へのシンボルの設定
const markerSym = {
  type: "simple-marker",
  style: "square",
  color: "#d90909",
  size: "6px",
  size: "6px",
  outline: null
}

const renderer = {
  type: "simple",
  symbol: markerSym
}

// SampleWorld レイヤーの作成
const lyrPoints = new FeatureLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer/0",
  renderer: renderer,
  outFields: outFieldsPoints
});
mapEl.map.addMany([lyrPoints]);

/*
  ステップ：Feature Table の操作
*/


/*
  ステップ：SketchViewModel の初期化
*/


function drawPolygon() {
  // ボタン要素の属性を修正し、選択不可状態に設定
  sketchBtn.disabled = true;
  /*
    ステップ：SketchViewModel の開始
  */

}

// FeatureLayerView の監視
let featureLayerView;
/*
  ステップ：FeatureLayerView の生成をキャッチ
*/


function queryPoints(geometryInput) {
  /*
    ステップ：Query の初期化
  */


  /*
    ステップ：検索の実行、完了のハンドリング
  */


}
// ハイライト状態の監視
let highlightHandler;

function displayQueryResult(results) {
  // ハイライトがすでに作成済みの場合、ハイライト内容を初期化
  if (highlightHandler) {
    highlightHandler.remove();
  }

  /*
    ステップ：テーブルにすでに選択済みのデータがある場合、選択内容を初期化
  */
//  if (featureTable.highlightIds) {
//    featureTable.highlightIds.removeAll();
//  }

  // 検索されたフィーチャが存在する場合のみハイライト
  if (results.features.length > 0) {
    /*
      ステップ：検索結果を使用して図形をハイライト
    */
    
      
    /*
    ステップ：検索結果を利用してデータを選択
    */


    /*
    ステップ：選択したデータのみをテーブルに表示
    */

    
    // ボタン要素の属性を修正し、選択可能状態に設定
    sketchBtn.disabled = false;
    // スケッチ結果の削除
    mapEl.view.graphics.removeAll();

  } else {
    // ボタン要素の属性を修正し、選択可能状態に設定
    sketchBtn.disabled = false;
    // スケッチ結果の削除
    mapEl.view.graphics.removeAll();
    // 選択のフィルタリングを初期化
    featureTable.filterBySelectionEnabled = false;

  }
}

// 結果のリセットおよび初期化
mapEl.view.ui.add(resetBtn, "bottom-left");

function resetTable() {
  featureTable.highlightIds.removeAll();
  featureTable.filterBySelectionEnabled = false;
  featureTable.filterGeometry = lyrPoints.fullExtent;
  sketchBtn.disabled = false;
  highlightHandler.remove();
}