// @license
// Copyright (c) 2017 Google Inc. All rights reserved.
// This code may only be used under the BSD style license found at
// http://polymer.github.io/LICENSE.txt
// Code distributed by Google as part of this project is also
// subject to an additional IP rights grant found at
// http://polymer.github.io/PATENTS.txt

defineParticle(({DomParticle}) => {

  let host = `party-size`;

  let styles = `
<style>
  [${host}] {
    padding: 6px 0;
    text-align: center;
  }
  [${host}] > * {
    vertical-align: middle;
  }
  [${host}] select {
    padding: 6px;
    font-size: 14px;
  }
  [${host}] .x-select {
    display: inline-block;
    position: relative;
  }
  [${host}] .x-select::after {
    content: '▼';
    display: block;
    position: absolute;
    right: 8px;
    bottom: 6px;
    transform: scaleY(0.6);
    pointer-events: none;
  }
  [${host}] .x-select > select {
    position: relative;
    margin: 0;
    padding: 8px 24px 8px 6px;
    border: 0;
    border-bottom: 1px solid #ddd;
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    font-weight: 300;
    overflow: hidden;
    outline: none;
    -webkit-appearance: none;
  }
</style>
  `;

  let template = `
${styles}
<div ${host}>
  <div class="x-select">
    <select on-change="_onPartySizeChanged">
      <option value="1" selected$={{selected1}}>1 person</option>
      <option value="2" selected$={{selected2}}>2 people</option>
      ${[3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
        .map(i => `<option value="${i}" selected$={{selected${i}}}>${i} people</option>`).join('')}
      <option value="21" selected$={{selected21}}>Larger party</option>
    </select>
  </div>
</div>
    `.trim();

  return class extends DomParticle {
    get template() {
      return template;
    }
    _willReceiveProps(props, state) {
      const event = Object.assign({}, props.event.rawData || {participants: 2});

      this._setState({currentEvent: event});
    }
    _shouldRender(props, state) {
      return Boolean(state.currentEvent);
    }
    _render(props, state) {
      const partySize = parseInt(state.currentEvent.participants);
      const selected = {};
      for (let i = 1; i <= 21; ++i) {
        selected[`selected${i}`] = Boolean(partySize == i);
      }
      return selected;
    }
    _onPartySizeChanged(e, state) {
      let newEvent = Object.assign({}, state.currentEvent || {});
      newEvent.participants = e.data.value;
      this._storeNewEvent(newEvent);
    }
    _storeNewEvent(newEvent) {
      const event = this._views.get('event');
      event.set(new event.entityClass(newEvent));
    }
  };

});

@@ -1840,21 +1840,23 @@
 veProps(
-props
+%7Bevent%7D
 , state)
@@ -1866,25 +1866,32 @@
       const 
-e
+currentE
 vent = Objec
@@ -1907,14 +1907,17 @@
 %7B%7D, 
-props.
+event && 
 even
@@ -1930,16 +1930,39 @@
 ata %7C%7C %7B
+%7D);%0A      currentEvent.
 particip
@@ -1969,15 +1969,13 @@
 ants
-: 2%7D);%0A
+ = 2;
 %0A   
@@ -2009,15 +2009,8 @@
 vent
-: event
 %7D);%0A
@@ -2032,37 +2032,46 @@
 ldRender(props, 
-state
+%7BcurrentEvent%7D
 ) %7B%0A      return
@@ -2079,22 +2079,16 @@
 Boolean(
-state.
 currentE
@@ -2119,21 +2119,30 @@
 (props, 
-state
+%7BcurrentEvent%7D
 ) %7B%0A    
@@ -2170,22 +2170,16 @@
 arseInt(
-state.
 currentE
@@ -2387,21 +2387,30 @@
 nged(e, 
-state
+%7BcurrentEvent%7D
 ) %7B%0A    
@@ -2411,18 +2411,20 @@
 %7B%0A      
-le
+cons
 t newEve
@@ -2450,14 +2450,8 @@
 %7B%7D, 
-state.
 curr
@@ -2458,22 +2458,16 @@
 entEvent
- %7C%7C %7B%7D
 );%0A     

allow event to be null