const [
  MapImageLayer,
  FeatureLayer,

  SimpleFillSymbol,
  Color,

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

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

  "@arcgis/core/renderers/ClassBreaksRenderer.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 の作成
*/
const popupTemplate = {
  title: "都市名：{areaname}",
  content: [
    {
      type: "fields",
      fieldInfos: [
        {
          fieldName: "pop2000",
          label: "人口",
          format: {
            places: 0,
            digitSeparator: true
          }
        },
        {
          fieldName: "class",
          label: "クラス"
        },
        {
          fieldName: "capital",
          label: "首都"
        },
      ]
    }
  ]
};

lyrPoint.set("popupTemplate", popupTemplate);


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

  /*
    ステップ：数値分類レンダラーの作成
  */
  const cbrPolygonRenderer = new ClassBreaksRenderer({
    defaultSymbol: symDefault,
    field: "pop00_sqmi"
  });

  /*
    ステップ：クラス分類を定義
  */
  cbrPolygonRenderer.addClassBreakInfo(0, 10, new SimpleFillSymbol({ color: new Color([254, 240, 217]) }));
  cbrPolygonRenderer.addClassBreakInfo(10, 100, new SimpleFillSymbol({ color: new Color([253, 204, 138]) }));
  cbrPolygonRenderer.addClassBreakInfo(100, 1000, new SimpleFillSymbol({ color: new Color([252, 141, 89]) }));
  cbrPolygonRenderer.addClassBreakInfo(1000, 10000, new SimpleFillSymbol({ color: new Color([227, 74, 51]) }));
  cbrPolygonRenderer.addClassBreakInfo(10000, 100000, new SimpleFillSymbol({ color: new Color([179, 0, 0]) }));

  /*
    ステップ：MapImageLayer にレンダラーを適用
  */
  lyrPolygon.findSublayerById(3).set("renderer", cbrPolygonRenderer);

}

function changePointRenderer() {
  /*
    ステップ：ポイント フィーチャに設定するシンボルの作成
  */
  const pointSymbol = {
    type: "simple-marker",
    color: new Color([255, 255, 0, 0.5]),
    outline: null
  };

  /*
    ステップ：レンダラーに適用するシンボル サイズのパラメーターを設定
  */
  const sizeInfo = {
    type: "size",
    field: "pop2000",
    valueUnit: "unknown",
    minSize: 5,
    maxSize: 50,
    minDataValue: 0,
    maxDataValue: 999999
  };

  /*
    ステップ：単一レンダラーを作成し、レイヤーに適用
  */
  const pointRenderer = {
    type: "simple",
    symbol: pointSymbol,
    visualVariables: [sizeInfo]
  };
  lyrPoint.set("renderer", pointRenderer);
}