text: import Component from 'can/component/';
  import Map from 'can/map/';
  import 'can/map/define/';
  import template from './list.stache';
  import Restaurant from 'place-my-order/models/restaurant';
  import State from 'place-my-order/models/state';
  import City from 'place-my-order/models/city';
  
  export var ViewModel = Map.extend({
    define: {
      states: {
        get() {
          return State.getList({});
        }
      },
      state: {
        type: 'string',
        value: null,
        set() {
          // Remove the city when the state changes
          this.attr('city', null);
        }
      },
      cities: {
        get() {
          let state = this.attr('state');
  
          if(!state) {
            return null;
          }
  
          return City.getList({ state });
        }
      },
      city: {
        type: 'string',
        value: null
      },
      restaurants: {
        get() {
          let state = this.attr('state');
          let city = this.attr('city');
  
          if(state && city) {
            return Restaurant.getList({
              'address.state': state,
              'address.city': city
            });
          }
  
          return null;
        }
      }
    }
  });
  
  export default Component.extend({
    tag: 'pmo-restaurant-list',
    viewModel: ViewModel,
    template: template
  });
  