import '@material/web/icon/icon.js'
import '@operato/data-grist'

import gql from 'graphql-tag'
import { css, html, LitElement } from 'lit'
import { property } from 'lit/decorators.js'

import { client } from '@operato/graphql'
import { i18next } from '@operato/i18n'
import { isMobileDevice } from '@operato/utils'
import { CommonHeaderStyles } from '@operato/styles'

export class NotificationRuleImporter extends LitElement {
  static styles = [
    CommonHeaderStyles,
    css`
      :host {
        display: flex;
        flex-direction: column;

        background-color: var(--md-sys-color-surface);
      }

      ox-grist {
        flex: 1;
      }
    `
  ]

  @property({ type: Array }) notificationRules: any[] = []
  @property({ type: Object }) columns = {
    list: { fields: ['name', 'description'] },
    pagination: { infinite: true },
    columns: [
      {
        type: 'string',
        name: 'name',
        header: i18next.t('field.name'),
        width: 150
      },
      {
        type: 'string',
        name: 'description',
        header: i18next.t('field.description'),
        width: 200
      },
      {
        type: 'checkbox',
        name: 'active',
        header: i18next.t('field.active'),
        width: 60
      }
    ]
  }

  render() {
    return html`
      <ox-grist
        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
        .config=${this.columns}
        .data=${{
          records: this.notificationRules
        }}
      ></ox-grist>

      <div class="footer">
        <div filler></div>
        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
      </div>
    `
  }

  async save() {
    const response = await client.mutate({
      mutation: gql`
        mutation importNotificationRules($notificationRules: [NotificationRulePatch!]!) {
          importNotificationRules(notificationRules: $notificationRules)
        }
      `,
      variables: { notificationRules: this.notificationRules }
    })

    if (response.errors?.length) return

    this.dispatchEvent(new CustomEvent('imported'))
  }
}
