const [
  MapImageLayer,
  FeatureLayer,

  SimpleFillSymbol,
  Color,

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

  "@arcgis/core/symbols/SimpleFillSymbol.js",
  "@arcgis/core/Color.js",

]);

// アプリケーションに配置される DOM 要素のスイッチ イベントのハンドリング
const switchWiget = document.getElementById("switchWiget");
const switchApplyRenderer = document.getElementById("switchApplyRenderer");
switchApplyRenderer.addEventListener('calciteSwitchChange', () => {
  // イベントオブジェクトからスイッチの状態を取得
  if (switchApplyRenderer.checked) {
    // スイッチが checked になった時の処理
    changePolygonRenderer();
  } else {
    lyrPolygon.findSublayerById(3).renderer = defaultPolygon
  }
});
const switchApplySymbol = document.getElementById("switchApplySymbol");
switchApplySymbol.addEventListener('calciteSwitchChange', () => {
  // イベントオブジェクトからスイッチの状態を取得
  if (switchApplySymbol.checked) {
    // スイッチが checked になった時の処理
    changePointRenderer();
  } else {
    lyrPoint.renderer = defaultPoint
  }
});

const mapEl = document.querySelector("arcgis-map");
await mapEl.viewOnReady();

// シンボルの変更ボタンの配置
mapEl.view.ui.add(switchWiget, "bottom-left");

// MapImageLayer（ポリゴン）の作成
const lyrPolygon = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  opacity: 0.5,
  sublayers: [{
    id: 3,
    visible: true
  }, {
    id: 2,
    visible: false
  }, {
    id: 1,
    visible: true
  }, {
    id: 0,
    visible: false
  }]
});

// FeatureLayer（ポイント）の作成
const lyrPoint = new FeatureLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0"
});

// MapImageLayer、FeatureLayer のそれぞれデフォルトのシンボルを変数に格納
const defaultPolygon = {
  type: "simple",
  symbol: {
    type: "simple-fill",
    color: [190, 210, 255, 0.5],
    outline: {
      type: "simple-line",
      color: [110, 110, 110, 1],
      width: 0.4
    }
  }
};

const defaultPoint = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    style: "circle",
    color: [255, 255, 115, 255],
    size: 4,
    outline: {
      color: [0, 0, 0, 255],
      width: 1
    }
  }
};

// レイヤーをマップに追加
mapEl.map.addMany([lyrPolygon, lyrPoint]);

/*
  ステップ：PopupTemplate の作成
*/


function changePolygonRenderer() {
  // 数値分類レンダラーに適用するデフォルトのシンボル
  const symDefault = new SimpleFillSymbol({
    color: new Color([255, 255, 0])
  });

  /*
    ステップ：数値分類レンダラーの作成
  */


  /*
    ステップ：クラス分類を定義
  */


  /*
    ステップ：MapImageLayer にレンダラーを適用
  */

    
}

function changePointRenderer() {
  /*
    ステップ：ポイント フィーチャに設定するシンボルの作成
  */


  /*
    ステップ：レンダラーに適用するシンボル サイズのパラメーターを設定
  */
    

  /*
    ステップ：単一レンダラーを作成し、レイヤーに適用
  */

    
}