/**
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

import { html } from '@polymer/lit-element';
import { PageViewElement } from './page-view-element.js';
import { connect } from 'pwa-helpers/connect-mixin.js';

// This element is connected to the Redux store.
import { store } from '../store.js';

//These are the actions needed by this element.
import { requestHours } from '../actions/firebase.js';

// We are lazy loading its reducer.
import firebase from '../reducers/firebase.js';

store.addReducers({
  firebase
});

// These are the shared styles needed by this element.
import { SharedStyles }       from './shared-styles.js';
import { ButtonSharedStyles } from './button-shared-styles.js'

// Import paper elements
import '@polymer/paper-input/paper-input.js';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-slider/paper-slider.js';
import '@polymer/paper-button/paper-button.js';

// Import other customElements
import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';

class MaoFourms extends connect(store)(PageViewElement) {
  _render(props) {
    return html`
      ${SharedStyles}
      ${ButtonSharedStyles}

      <style>
      .title {
        grid-area: title;
      }

      .tutorCard, .hoursCard {
        background-color: #f7f7f7;
        padding:          1px;
      }

      .hours-grid {
        display:  grid;
        grid-gap: 10px;

        grid-template-areas:
                        "title"
                        "item1"
                        "item2";
      }

      .approved-card {
        grid-area:  item1;

        background-color: #b7e1cd;
        margin:           1px;
        padding:          0 10px 15px 10px;
      }

      .unapproved-card {
        grid-area:  item2;

        background-color: #fce8b2;
        margin:           1px;
        padding:          0 10px 15px 10px;
      }

      .submit-hours {
        width: 100%;
      }

      paper-card {
        --paper-card-background-color: #f7f7f7;
        display: block;
      }

      paper-button {
        margin-left: auto;
        margin-right: auto;
        display: block;
      }

      h3 {
        text-align: center;
      }

      #datePicker {
        margin-top: 10px;
      }

      @media (min-width: 460px) {
        .hours-grid {
          grid-template-areas:
                          "title    title"
                          "item1    item2";
        }

        .tutorCard, .hoursCard {
          padding:  1em;
        }
      }

      </style>

      <section>
      </section>
    `;
  }

  static get properties() { return {
    // This is the data from the store.
    signedIn:           Boolean,
    authMessage:        String,
    hours:              Number,
    requestedHours:     Number
  }}

  _stateChanged(state) {
    this.hours          = state.firebase.hours;
    this.requestedHours = state.firebase.requestedHours;
    this.signedIn       = state.firebase.initialized;
    this.authMessage    = state.firebase.authMessage;

    this.sumbitFieldsOpened = false;
  }

}

window.customElements.define('mao-fourms', MaoFourms);