/**
@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 { LitElement, html } from '@polymer/lit-element';
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 { createComment } from '../actions/firebaseFirestore';

// Import button styles
import { ButtonSharedStyles } from './button-shared-styles.js';

class ForumElement extends connect(store)(LitElement) {
  _render(props) {
    return html`
      ${ButtonSharedStyles}

      <style>

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

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

      .card-content > h4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        font-weight:  lighter;
        font-style:   italic;
        word-break:   break-all;
      }

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

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

      .success {
          width:        100%;
          margin-top:   5px;
      }

      .comment-title {
        text-align: center;
      }

      .comment-author {
        text-align:   center;
        font-weight:  lighter;
        font-style:   italic;
        word-break:   break-all;
      }

      .forum-date {
        text-align: left;
      }

      .forum-author {
        text-align:   right;
      }

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

        #comment-subject-field {
            margin-left:    auto;
            margin-right:   auto;
            text-align:     center;
            width:          50%;
        }
      }


      </style>

      <paper-card
      elevation="0">
        <div class="card-content">
            <h4><span class="forum-date">${props.day ? props.day.toDate().toLocaleDateString("en-US"): ""}</span><span class="forum-author">${props.author}</span></h4>
            <h3>${props.subject}</h3>
            <p>${props.content}</p>
        </div>
        <div class="card-actions">
            <div class="button-grid">
                <paper-button hidden=${props.comments.length == 0} class="info" onclick="${() => this.showComments = !this.showComments}">${this.showComments? "Hide Comments" : "Show Comments"}</paper-button>
                <paper-button hidden=${!props.signedIn} class="alert" onclick="${() => this.postComment  = !this.postComment}">${this.postComment? "Hide Draft" : "Post Comment"}</paper-button>
            </div>

            <div hidden="${!props.postComment}">
                <hr>
                <paper-textarea label="Comment Content" id="comment-content-field"></paper-textarea>
                <paper-button raised class="success" onclick="${() => this.submitComment()}">Submit Comment</paper-comment>
            </div>

            <div hidden="${!props.showComments}">
                <hr hidden="${!props.showComments && !props.postComment}">
                <h4 class="comment-title">Comments</h4>
                <div id="comment-area"></div> 
            </div>
        </div>
      </paper-card>
    `;
  }

  static get properties() { return {
    signedIn:   Boolean,

    author:     String,
    subject:    String,
    content:    String,
    day:        Date,
    postId:     String,

    comments:   Array,

    showComments:   Boolean,
    postComment:    Boolean
  }};

  _stateChanged(state) {
    this.signedIn = state.firebaseAuth.signedIn;
  }

  _firstRendered() {
    this.updateComments();
  }

  constructor() {
    super();

    this.signedIn   = false;

    this.author     = "";
    this.content    = "";
    this.postId     = "";

    this.comments   = [];

    this.showComments   = false;
    this.postComment    = false;
  }
  
    submitComment() {
      var commentContent = this.shadowRoot.getElementById('comment-content-field');
      if( commentContent &&
          commentContent.value.trim().length > 0) {
        if(confirm('Are you sure you want to submit this comment on ' + this.author + "'s post about " + this.subject + '?')) {
            store.dispatch(createComment(this.postId, commentContent.value.replace('\n','<br>')));
            commentContent.value = "";
        }
      } else {
          alert('Please fill out comment subject and content fields.');
      }
    }

    updateComments() {
      var commentArea = this.shadowRoot.getElementById('comment-area');
      commentArea.innerHTML = "";

      for(var i = this.comments.length-1; i >= 0; i--) {
        var commentElement = document.createElement('div');

        var authorElement = document.createElement('h4');
        authorElement.classList.add('comment-author');
        authorElement.innerHTML = this.comments[i].user;

        var contentElement = document.createElement('p');
        contentElement.innerHTML = this.comments[i].content;

        commentElement.appendChild(authorElement);
        commentElement.appendChild(contentElement);

        commentArea.appendChild(commentElement);
      }
    }
}

window.customElements.define('forum-element', ForumElement);