import '@material/mwc-icon'

import { css, html, LitElement } from 'lit'

import { i18next } from '@things-factory/i18n-base'

import { fetchGroup } from '../graphql'

export class GroupInfo extends LitElement {
  static get properties() {
    return {
      groupId: String,
      group: Object
    }
  }

  static get styles() {
    return [
      css`
        :host {
          display: block;
          background-color: var(--main-section-background-color);
          height: 100%;
          min-width: 350px;
          overflow: auto;
          position: relative;

          --form-grid-gap: 2px 0;
          --input-field-padding: var(--padding-default);
          --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
          --mdc-button-horizontal-padding: var(--padding-default);
        }

        form {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          grid-gap: var(--form-grid-gap);
          grid-auto-rows: minmax(24px, auto);
          padding: var(--padding-wide);
          align-items: center;
        }

        [buttons] {
          grid-column: span 12;
          padding: var(--padding-default) 0;
          text-align: right;
        }

        [buttons] * {
          margin: 0 0 0 var(--margin-narrow);
        }
        [danger] {
          float: left;
          margin: 0 var(--margin-narrow) 0 0;
          --mdc-theme-primary: var(--status-danger-color);
        }

        fieldset {
          display: contents;
        }

        legend {
          grid-column: span 12;
          padding: var(--legend-padding);
          font: var(--legend-font);
          color: var(--legend-text-color);
          text-transform: capitalize;
        }

        label {
          grid-column: span 12;
          text-transform: capitalize;
          color: var(--label-color);
          font: var(--label-font);
        }

        span {
          grid-column: span 12;
          border-bottom: var(--border-dark-color);
          margin-bottom: var(--margin-default);
          padding-bottom: var(--padding-narrow);
          font: var(--input-field-font);
        }
        span mwc-icon {
          vertical-align: middle;
          font-size: var(--fontsize-large);
          color: var(--primary-color);
        }

        input,
        table,
        select,
        textarea,
        [custom-input] {
          grid-column: span 12;

          border: var(--input-field-border);
          border-radius: var(--input-field-border-radius);
          margin-bottom: var(--margin-default);
          padding: var(--input-field-padding);
          font: var(--input-field-font);
        }

        input[type='checkbox'],
        input[type='radio'] {
          place-self: center;
          margin: 0;
          grid-column: 1;
        }

        input[type='checkbox'] + label,
        input[type='radio'] + label {
          text-align: left;
          grid-column: span 11 / auto;

          font: var(--form-sublabel-font);
          color: var(--form-sublabel-color);
        }

        input:focus {
          outline: none;
          border: 1px solid var(--focus-background-color);
        }

        @media screen and (max-width: 460px) {
          :host {
            width: 100vw;
          }
        }
      `
    ]
  }

  render() {
    var group = this.group || { name: '', description: '' }

    return html`
      <form>
        <fieldset>
          <legend>group information</legend>
          <label>${i18next.t('label.name')}</label>
          <input type="text" .value=${group.name} @change=${e => (this.group.name = e.target.value)} />

          <label>${i18next.t('label.description')}</label>
          <input type="text" .value=${group.description} @change=${e => (this.group.description = e.target.value)} />

          <label>${i18next.t('label.creator')}</label>
          <span>
            <mwc-icon>person</mwc-icon> ${group.creator && group.creator.name} <mwc-icon>schedule</mwc-icon> ${new Date(
              Number(group.createdAt)
            ).toLocaleString()}
          </span>

          <label>${i18next.t('label.updater')}</label>
          <span>
            <mwc-icon>person</mwc-icon> ${group.updater && group.updater.name} <mwc-icon>schedule</mwc-icon> ${new Date(
              Number(group.updatedAt)
            ).toLocaleString()}
          </span>

          <div buttons>
            ${this.groupId
              ? html`
                  <mwc-button
                    dense
                    raised
                    danger
                    label=${i18next.t('button.delete')}
                    @click=${this.deleteGroup.bind(this)}
                    icon="delete_outline"
                  ></mwc-button>
                  <mwc-button
                    dense
                    raised
                    label=${i18next.t('button.save')}
                    @click=${this.updateGroup.bind(this)}
                    icon="done"
                  ></mwc-button>
                `
              : html`
                  <mwc-button
                    dense
                    raised
                    label=${i18next.t('button.create')}
                    @click=${this.createGroup.bind(this)}
                    icon="create_new_folder"
                  ></mwc-button>
                `}
          </div>
        </fieldset>
      </form>
    `
  }

  updated(changes) {
    if (changes.has('groupId')) {
      this.refresh()
    }
  }

  async refresh() {
    if (!this.groupId) {
      /* model이 없으므로, 기본 모델을 제공함. */
      this.group = { name: '', description: '' }
    } else {
      var response = await fetchGroup(this.groupId)
      this.group = response.group
    }
  }

  async createGroup() {
    this.dispatchEvent(
      new CustomEvent('create-group', {
        detail: this.group
      })
    )

    this.close()
  }

  async updateGroup() {
    this.dispatchEvent(
      new CustomEvent('update-group', {
        detail: this.group
      })
    )

    this.close()
  }

  async deleteGroup() {
    this.dispatchEvent(
      new CustomEvent('delete-group', {
        detail: this.groupId
      })
    )

    this.close()
  }

  close() {
    history.back()
  }
}

customElements.define('group-info', GroupInfo)
