---
// 公園・公共施設の一覧を絞り込むコントロール。地図の上に表示する。
// 実際の絞り込みは ParksTable.astro のスクリプトが行う。
import { parks, towns, total } from "@/data/parks-rows";
import { PARK_ICONS } from "@/data/park-icons";

const facilityTypes = [
  "図書館",
  "公民館",
  "児童館",
  "地域センター",
  "市役所支所",
  "文化施設",
].filter((type) =>
  parks.some((p) => p["施設"] === "1" && p["種別"] === type),
);
---

<div class="parks-controls" data-parks-filters>
  <label>
    <span>種類</span>
    <select data-parks-kind>
      <option value="">すべて</option>
      <option value="park">公園</option>
      {facilityTypes.map((type) => (
        <option value={type}>{type}</option>
      ))}
    </select>
  </label>
  <label>
    <span>町名</span>
    <select data-parks-town>
      <option value="">すべての町名</option>
      {towns.map((town) => (
        <option value={town}>{town}</option>
      ))}
    </select>
  </label>
  <label>
    <span>キーワード</span>
    <input type="search" data-parks-search placeholder="名称・住所・設備など" />
  </label>
  <label class="parks-unconfirmed-filter" title="名称・住所などが未確認の公園だけを表示">
    <input type="checkbox" data-parks-unconfirmed />
    未確認のみ
  </label>
  <fieldset class="parks-facilities">
    <legend>設備・遊具で絞る</legend>
    <label><input type="checkbox" data-fac-filter value="toilet" />トイレ</label>
    <label><input type="checkbox" data-fac-filter value="water" />水飲み場・給水</label>
    <label>
      <input type="checkbox" data-fac-filter value="picnic" />
      <span class="filter-icon" set:html={PARK_ICONS.picnic.svg} />ピクニック・広場
    </label>
    <label><input type="checkbox" data-fac-filter value="clock" />⏰時計</label>
    <label><input type="checkbox" data-fac-filter value="toy" />遊具あり</label>
    <label>
      <input type="checkbox" data-fac-filter value="sand" />
      <span class="filter-icon" set:html={PARK_ICONS.sand.svg} />砂場
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="swing" />
      <span class="filter-icon" set:html={PARK_ICONS.swing.svg} />ブランコ
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="seesaw" />
      <span class="filter-icon" set:html={PARK_ICONS.teeter.svg} />シーソー
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="spring" />
      <span class="filter-icon" set:html={PARK_ICONS.spring.svg} />スプリング遊具
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="jungle" />
      <span class="filter-icon" set:html={PARK_ICONS.climbing.svg} />ジャングルジム
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="plane" />
      <span class="filter-icon" set:html={PARK_ICONS.airplane.svg} />ヒコーキ
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="slide" />
      <span class="filter-icon" set:html={PARK_ICONS.slide.svg} />滑り台
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="complex" />
      <span class="filter-icon" set:html={PARK_ICONS.playground.svg} />複合遊具
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="rope" />
      <span class="filter-icon" set:html={PARK_ICONS.flyingfox.svg} />ロープウェイ
    </label>
    <label>
      <input type="checkbox" data-fac-filter value="ball" />
      <span class="filter-icon" set:html={PARK_ICONS.ball.svg} />ボール遊び
    </label>
  </fieldset>
  <span class="parks-count" data-parks-count aria-live="polite">{total}件</span>
</div>

<p class="parks-disclaimer">
  情報には誤りが含まれる場合があります。最新の情報は各施設の公式ページでご確認ください。
</p>

<style>
  .parks-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    align-items: center;
    margin: 0 0 0.55rem;
  }
  /* Starlight の "* + *" の上下マージンが flex 行内で上下ズレを起こすため打ち消す */
  .parks-controls > * {
    margin: 0;
  }
  .parks-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.1rem;
    font-size: 0.9rem;
    line-height: 1.2;
  }
  .parks-controls label > span {
    line-height: 1.2;
  }
  .parks-controls select,
  .parks-controls input[type="search"] {
    height: 2.1rem;
    box-sizing: border-box;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--sl-color-hairline, #ccc);
    border-radius: 0.3rem;
    background: var(--sl-color-bg, #fff);
    color: var(--sl-color-text, inherit);
    font: inherit;
    line-height: 1.2;
  }
  .parks-facilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.6rem;
    align-items: center;
    margin: 0;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--sl-color-hairline, #ccc);
    border-radius: 0.3rem;
  }
  .parks-facilities legend {
    padding: 0 0.2rem;
    font-size: 0.78em;
    color: inherit;
    opacity: 0.7;
  }
  .parks-facilities label {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 1.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
  }
  .parks-facilities input[type="checkbox"] {
    width: 0.9em;
    height: 0.9em;
    margin: 0;
  }
  .filter-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: none;
  }
  .filter-icon :global(svg) {
    display: block;
    width: 100%;
    height: 100%;
  }
  .parks-count {
    margin-left: auto;
    font-size: 0.9rem;
    opacity: 0.75;
  }
  .parks-disclaimer {
    margin: 0 0 0.55rem;
    color: var(--sl-color-gray-2);
    font-size: 0.78rem;
  }
</style>