/**
@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 { createForumPost, snapshotForums } from '../actions/firebaseFirestore.js';

// 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-button/paper-button.js';

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

//import local customElements
import './forum-element.js';

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

      <style>

      paper-card {
        display: block;
        padding-bottom: 3px;
      }

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

      .button-grid {
        display: grid;
        grid-template-rows: 1fr;
      }

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

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

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

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

        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 Forum 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.submitForum()}">
              Create Post
            </paper-button>
          </div>

        </paper-card>

      </section>

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

        <div hidden="${!props.onceOnline}" class="post-grid" id="posts-grid"></div>
        <div hidden="${props.onceOnline}"><h3>Please connect to internet so we can fetch forums.</h3></div>

      </section>
    `;
  }

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

    onceOnline: Boolean
  }}

  constructor() {
    super();

    this.onceOnline = false;
    this.forumPosts = [];
    this.signedIn = false;
  }

  _stateChanged(state) {
    this.signedIn     = state.firebaseAuth      .signedIn;
    this.forumPosts   = state.firebaseFirestore .forumPosts;
    if(this.shadowRoot) {
      this.updateSection();
    }
 
    if(!state.app.offline) {
      this.onceOnline = true;
    }
  }

  _firstRendered() {
  }

  submitForum() {
    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 forum page? It will be public to everyone.')) {
              store.dispatch(createForumPost(subjectElement.value, contentElement.value.replace('\n','<br>')));

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

  }

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

    for(var i = this.forumPosts.length-1; i >=0; i--) {
      var forumElement  = document.createElement('forum-element');

      forumElement.author   = this.forumPosts[i].email  .replace('@communityschoolnaples.org', '');
      forumElement.subject  = this.forumPosts[i].subject;
      forumElement.content  = this.forumPosts[i].content;
      forumElement.day      = this.forumPosts[i].day;
      forumElement.postId   = this.forumPosts[i].postId;
      forumElement.comments = this.forumPosts[i].comments ? this.forumPosts[i].comments : [];

      postsGrid.appendChild(forumElement);
      }
  }

}

window.customElements.define('mao-forums', MaoForums);