<template>
  <section class="section">
    <h1 class="title">Vue Related Select Controls</h1>
    <p class="content">This CodePen demonstrates driving the contents of one HTML <code>&lt;select&gt;</code> from another.  The abbreviated list of US States in the State select will provide the items for the Counties select.  Clearing the State select will also clear the Counties select.
  </p>
    <p class="content">
      The source of data is an array of de-normalized objects.  <em>De-normalized</em> means that there are repeating values -- the US States -- that categorize the records.  This CodePen uses the single source for both selects.
  </p>
    <div class="columns">
      <div class="column">
    <div class="field">
      <div class="control">
        <div class="select is-info is-large">
          <select v-model="selectedState">
            <option :value="null">Select a state</option>
            <option v-for="s in states" :key="s" :value="s">
              {{ s }}
            </option>     
          </select>
        </div>
      </div>
    </div>
  </div>
      <div class="column">
    <div class="field">
      <div class="control">
        <div class="select is-success is-large">
          <select v-model="selectedCounty">
            <option :value="null">Select a county</option>
            <option v-for="c in selectedCounties" :key="c" :value="c">
              {{ c }}
            </option>
          </select>
        </div>   
      </div>
        </div>   
      </div>
    </div>
    <hr />
    <p class="content"><span class="has-text-weight-bold">Selected State:</span> {{ selectedState | noSelection }}</p><p class="content"><span class="has-text-weight-bold">Selected County:</span> {{ selectedCounty | noSelection }}</p>
  </section>
</template>

<script>
export default {
  data() {
    return {
      selectedState: null,
      selectedCounty: null,
      counties: [
        {
          state: "Maryland",
          county: "Baltimore"
        },
        {
          state: "Maryland",
          county: "Frederick"
        },
        {
          state: "Maryland",
          county: "Montgomery"
        },
        {
          state: "New York",
          county: "Westchester"
        },
        {
          state: "New York",
          county: "Rockland"
        },
        {
          state: "New York",
          county: "Suffolk"
        },
        {
          state: "New York",
          county: "Saratoga"
        },        
        {
          state: "Pennsylvania",
          county: "Bucks"
        },
        {
          state: "Pennsylvania",
          county: "Adams"
        },
      ]
    };
  },
  watch: {
    selectedState() {
      // whenever the state changes, the county is no
      // longer valid so reset it
      this.selectedCounty = null;
    }
  },
  computed: {
    states() {
      // map() converts objects to list of states with dups.
      // new Set() removes the duplicates
      return new Set(this.counties.map( c => c.state));
    },
    selectedCounties() {
      if( this.selectedState == null ) {
        return [];
      }
      // return single county values belonging to state
      return this.counties
        .filter( 
          c => c.state == this.selectedState )
        .map( c => c.county );
    }
  },
  filters: {
    noSelection(val) {
      if( val == null ) {
        return "No Selection";
      }
      return val;
    }
  }
};
</script>