<dom-module id="app-price-edit-wine">
  <template>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
      }

      .row {
        display: flex;
      }

      .row > div {
        flex: 1;
      }

      .padding {
        padding-top: 15px;
      }

      .col-margin {
        margin-right: 5px;
      }
    </style>
 
    <div class="row">
      <div class="col-margin">
        <app-price-form-select 
          id="wineType" 
          label="Wine Type" 
          options="[[wineTypeOptions]]" 
          view-mode$="[[viewMode]]">
        </app-price-form-select>
      </div>
      <div>
        <app-price-form-select 
          id="color" 
          label="Wine Color" 
          options="[[wineColorOptions]]" 
          view-mode$="[[viewMode]]">
        </app-price-form-select>
      </div>
    </div>

    <app-price-form-section
      class="padding"
      id="section"
      page-id="[[pageId]]"
      view-mode$="[[viewMode]]"
      label="Page Section"
      placeholder="ex. Red Burgundies / Scotch Whiskies on Sale">
    </app-price-form-section>

    <app-price-form-name
      class="padding"
      id="name"
      view-mode$="[[viewMode]]"
      label="Name"
      placeholder="ex. Santenay">
    </app-price-form-name>

    <app-price-form-country
      class="padding"
      id="country"
      view-mode$="[[viewMode]]"
      label="Country"
      placeholder="ex. France">
    </app-price-form-country>

    <div class="row padding">
      <div class="col-margin">
        <app-price-form-input
          id="year"
          view-mode$="[[viewMode]]"
          label="Vintage (year)"
          type="number"
          placeholder="YYYY">
        </app-price-form-input>
      </div>
      <div>
        <app-price-form-select 
          id="bottleType" 
          label="Bottle Size" 
          value="Standard"
          options="[[bottleTypeOptions]]" 
          view-mode$="[[viewMode]]">
        </app-price-form-select>
      </div>
    </div>

    <div class="row padding">
      <div class="col-margin">
        <app-price-form-input
          id="price"
          view-mode$="[[viewMode]]"
          label="Price Per Bottle"
          type="number"
          is-dollar
          placeholder="0.00">
        </app-price-form-input>
      </div>
      <div>
        <app-price-form-input
          id="casePrice"
          is-dollar
          view-mode$="[[viewMode]]"
          type="number"
          label="Price Per Case"
          placeholder="0.00">
        </app-price-form-input>
      </div>
    </div> 

  </template>

  <script>

    class AppPriceEditWine extends Polymer.Element {

      static get is() { return 'app-price-edit-wine' }

      static get properties() {
        return {
          pageId : {
            type : String,
            value : '',
          },
          viewMode : {
            type : Boolean,
            value : false          
          }
        }
      }

      get wineTypeOptions() {
        return [
          {
            value : 'Still',
            icon : 'cork:wine-still'
          },
          {
            value : 'Sparkling',
            icon : 'cork:wine-sparkling'
          },
          {
            value : 'Fortified',
            icon : 'cork:wine-fortified'
          }
        ]
      }

      get wineColorOptions() {
        return [
          {
            value : 'Red',
            icon : 'cork:wine-red'
          },
          {
            value : 'White',
            icon : 'cork:wine-white'
          },
          {
            value : 'Rosé',
            icon : 'cork:wine-rose'
          }
        ]
      }

      get bottleTypeOptions() {
        return [
          {value : "Split"},
          {value : "Piccolo"},
          {value : "Pony"},
          {value : "Quarter Bottle"},
          {value : "Snipe"},
          {value : "Quarter"},
          {value : "Chopine"},
          {value : "Demi"},
          {value : "Half Bottle"},
          {value : "Tenth"},
          {value : "Jennie"},
          {value : "Pinte"},
          {value : "Clavelin"},
          {value : "Standard"},
          {value : "Fifth"},
          {value : "Litre"},
          {value : "Magnum"},
          {value : "Marie Jeanne"},
          {value : "Jeroboam"},
          {value : "Rehoboam"},
          {value : "McKenzie"},
          {value : "Imperial"},
          {value : "Methuselah"},
          {value : "Salmanazar"},
          {value : "Balthazar"},
          {value : "Nebuchadnezzar"},
          {value : "Melchior"},
          {value : "Solomon"},
          {value : "Sovereign"},
          {value : "Primat"},
          {value : "Goliath"},
          {value : "Melchizedek"},
          {value : "Midas"},
          {value : "Tenths"},
          {value : "Pint"},
          {value : "Quart"}
        ].sort((a, b) => {
          if( a.value > b.value ) return 1;
          if( a.value < b.value ) return -1;
          return 0;
        })
      }

      reset() {
        this.$.color.value = 'Red';
        this.$.wineType.value = 'Still';
        this.$.bottleType.value = 'Standard';
        this.$.name.value = '';
        this.$.price.value = '';
        this.$.casePrice.value = '';
        this.$.year.value = '';
        this.$.country.value = '';
        this.$.section.value = '';
      }

      edit(data) {
        this.$.color.value = data.color || this.getEmptyValue('Red');
        this.$.wineType.value = data.wineType || this.getEmptyValue('Still');
        this.$.bottleType.value = data.bottleType || this.getEmptyValue('Standard');
        this.$.section.value = data.section || this.getEmptyValue();
        this.$.name.value = data.name || this.getEmptyValue();
        this.$.price.value = this.getDollarValue(data.price);
        this.$.casePrice.value = this.getDollarValue(data.casePrice);
        this.$.country.value = data.country || this.getEmptyValue();
        this.$.year.value = data.year || this.getEmptyValue();
      }

      getDollarValue(val) {
        if( !val ) return this.getEmptyValue();
        return parseFloat(val).toFixed(2);
      }

      getEmptyValue(val) {
        return this.viewMode ? '-' : (val || '');
      }

      getData() {
        return {
          color: this.$.color.value,
          wineType : this.$.wineType.value,
          bottleType : this.$.bottleType.value,
          name : this.$.name.value,
          price : this.$.price.value,
          casePrice : this.$.casePrice.value,
          country : this.$.country.value,
          year : this.$.year.value,
          section : this.$.section.value
        };
      }

    }

    window.customElements.define(AppPriceEditWine.is, AppPriceEditWine);
  </script>
</dom-module>