// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {LitElement, html, css} from 'lit-element';
import {connectStore} from 'reducers/base.js';
import * as projectV0 from 'reducers/projectV0.js';
import * as sitewide from 'reducers/sitewide.js';
import '../mr-mode-selector/mr-mode-selector.js';
import '../mr-chart/mr-chart.js';

/**
 * <mr-chart-page>
 *
 * Chart page view containing mr-mode-selector and mr-chart.
 * @extends {LitElement}
 */
export class MrChartPage extends connectStore(LitElement) {
  /** @override */
  static get styles() {
    return css`
      :host {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 0.5em 8px;
      }
      h2 {
        font-size: 1.2em;
        margin: 0 0 0.5em;
      }
      .list-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        padding: 0.5em 0;
        height: 32px;
      }
      .help {
        padding: 1em;
        background-color: rgb(227, 242, 253);
        width: 44em;
        font-size: 92%;
        margin: 5px;
        padding: 6px;
        border-radius: 6px;
      }
      .monospace {
        font-family: monospace;
      }
    `;
  }

  /** @override */
  render() {
    return html`
      <div class="list-controls">
        <mr-mode-selector
          .projectName=${this._projectName}
          .queryParams=${this._queryParams}
          .value=${'chart'}
        ></mr-mode-selector>
      </div>
      <mr-chart
        .projectName=${this._projectName}
        .queryParams=${this._queryParams}
      ></mr-chart>

      <div>
        <div class="help">
          <h2>Supported query parameters:</h2>
          <span class="monospace">
            cc, component, hotlist, label, owner, reporter, status
          </span>
          <br /><br />
          <a href="https://bugs.chromium.org/p/monorail/issues/entry?labels=Feature-Charts">
            Please file feedback here.
          </a>
        </div>
      </div>
    `;
  }

  /** @override */
  static get properties() {
    return {
      _projectName: {type: String},
      /** @private {Object} */
      _queryParams: {type: Object},
    };
  }

  /** @override */
  stateChanged(state) {
    this._projectName = projectV0.viewedProjectName(state);
    this._queryParams = sitewide.queryParams(state);
  }
};
customElements.define('mr-chart-page', MrChartPage);