/**
@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, createFourmPost } 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-input/paper-textarea.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>

      paper-card {
        display: block;
      }

      .card-actions > paper-button {
        margin-left:  auto;
        margin-right: auto;
        display: block;
        width: 50%;
      }

      .card-content > h4 {
        text-align:   right;
        font-weight:  lighter;
        font-style:   italic;
        word-break:   break-all;
      }

      .card-content > h3, p {
        word-break: break-all;
      }

      .card-content > h3, p {
        text-align: center;
      }


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

        grid-template-columns: 1fr;
      }

      @media (min-width: 460px) {
        .post-grid {
          grid-template-columns: 1fr 1fr;
        }
      }

      </style>

      <section hidden="${!props.signedIn}">

        <paper-card elevation="0">

          <div class="card-content">
            <h3>Create Fourm Post</h3>
            <paper-input label="Subject" id="subject-field"></paper-input>
            <paper-textarea label="Content" id="content-field"></paper-textarea>
          </div>

          <div class="card-actions">
            <paper-button
            raised
            class   ="info"
            on-tap  ="${() => this.submitFourm()}">
              Create Post
            </paper-button>
          </div>

        </paper-card>

      </section>

      <section>

        <h2 class="underline">Recent Posts</h2>

        <div class="post-grid" id="posts-grid"></div>

      </section>
    `;
  }

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

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

    this.fourmPosts   = state.firebase.fourmPosts;
    this.updateSection();
  }

  submitFourm() {
    if(this.shadowRoot) {
      var subjectElement  = this.shadowRoot.getElementById('subject-field');
      var contentElement  = this.shadowRoot.getElementById('content-field');

      if(!contentElement.value) {
        contentElement.value  = "";
      }

      if( subjectElement.value.trim() === "" ||
          contentElement.value.trim() === ""
        )
          {
            alert("Please fill out all fields when creating a form post.");
          } else {
            if(confirm('Are you sure you want to submit this to the fourm page? It will be public to everyone.')) {
              store.dispatch(createFourmPost(subjectElement.value, contentElement.value));

              subjectElement.value  = "";
              contentElement.value  = "";
            }
          }
    }

  }

  updateSection() {
    if(this.shadowRoot) {
      var postsGrid       = this.shadowRoot.getElementById('posts-grid');
      postsGrid.innerHTML = "";

      for(var i = this.fourmPosts.length-1; i >=0; i--) {
        var paperCard     = document.createElement('paper-card');
        var cardContent   = document.createElement('div');
        var fourmAuthor   = document.createElement('h4');
        var fourmSubject  = document.createElement('h3');
        var fourmContent  = document.createElement('p');

        fourmAuthor.innerHTML   = this.fourmPosts[i].email  .replace('@communityschoolnaples.org', '');
        fourmSubject.innerHTML  = this.fourmPosts[i].subject;
        fourmContent.innerHTML  = this.fourmPosts[i].content;

        cardContent.classList.add('card-content');
        cardContent.appendChild(  fourmAuthor);
        cardContent.appendChild(  fourmSubject);
        cardContent.appendChild(  fourmContent);

        paperCard.elevation     = 0;
        paperCard.appendChild(  cardContent);

        postsGrid.appendChild(paperCard);
      }
    }
  }

}

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