<!--
@license
Copyright (c) 2015 Abdón Rodríguez Davila (@abdonrd). All rights reserved.
This code may only be used under the MIT license.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="moment-import.html">

<!--
Polymer element wrapper for the [moment](https://github.com/moment/moment) library.

Examples:

    <moment-element></moment-element>
    <moment-element datetime="1991-12-31" output-format="MMM DD[,] YYYY"></moment-element>

@demo demo/index.html
-->

<dom-module id="moment-element">
  <template>

  </template>

  <script>
    Polymer({
      is: 'moment-element',

      properties: {
        /**
         * The input datetime. If don't set the datetime, the datetime will be now.
         * For consistent results, parsing anything other than ISO 8601 strings
         * with the `inputFormat` property. More information in [moment String](http://momentjs.com/docs/#/parsing/string/).
         */
        datetime: String,

        /**
         * The datetime input format. An string using the
         * [moment String + Format](http://momentjs.com/docs/#/parsing/string-format/).
         */
        inputFormat: String,

        /**
         * The datetime output format. Options are 'now' or datetime using the
         * [moment Format](http://momentjs.com/docs/#/displaying/format/).
         */
        outputFormat: String,

        /**
         * Relative time using [momen time from now](http://momentjs.com/docs/#/displaying/fromnow/)
         * or [momen Time from datetime](http://momentjs.com/docs/#/displaying/from/).
         */
        from: String,

        /**
         * Relative time using [momen Time to now](http://momentjs.com/docs/#/displaying/tonow/)
         * or [momen Time to datetime](http://momentjs.com/docs/#/displaying/to/).
         */
        to: String,

        /**
         * The output datetime.
         */
        output: String
      },

      ready: function() {
        this.output = this._initializeMoment();

        if (this.from) {
          this.output = this._getFrom();
        } else if (this.to) {
          this.output = this._getTo();
        }

        Polymer.dom(this.root).innerHTML = this.output;
      },

      _initializeMoment: function() {
        if (this.datetime && this.inputFormat) {
          var output = moment(this.datetime, this.inputFormat);
        } else if (this.datetime) {
          var output = moment(this.datetime);
        } else {
          var output = moment();
        }

        if (this.outputFormat) {
          return output.format(this.outputFormat);
        } else {
          return output;
        }
      },

      _getFrom: function() {
        if (this.from === 'now') {
          return this.output.fromNow();
        } else {
          return this.output.from(moment(this.from));
        }
      },

      _getTo: function() {
        if (this.to === 'now') {
          return this.output.toNow();
        } else {
          return this.output.to(moment(this.to));
        }
      }
    });
  </script>
</dom-module>