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

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

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

@customElement('scenario-importer')
export class ScenarioImporter extends LitElement {
  static styles = [
    CommonHeaderStyles,
    CommonGristStyles,
    css`
      :host {
        display: flex;
        flex-direction: column;

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

      ox-grist {
        flex: 1;
      }
    `
  ]

  @property({ type: Array }) scenarios: any
  @property({ type: Object }) columns: any = {
    list: { fields: ['name', 'description'] },
    pagination: { infinite: true },
    columns: [
      {
        type: 'string',
        name: 'name',
        header: i18next.t('field.name'),
        width: 150
      },
      {
        type: 'string',
        name: 'type',
        header: i18next.t('field.type'),
        width: 100
      },
      {
        type: 'string',
        name: 'description',
        header: i18next.t('field.description'),
        width: 200
      },
      {
        type: 'crontab',
        name: 'schedule',
        header: i18next.t('field.schedule'),
        width: 80
      },
      {
        type: 'string',
        name: 'timezone',
        header: i18next.t('field.timezone'),
        width: 120
      }
    ]
  }

  render() {
    return html`
      <ox-grist
        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
        .config=${this.columns}
        .data=${{ records: this.scenarios }}
      ></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 importScenarios($scenarios: [ScenarioPatch!]!) {
          importScenarios(scenarios: $scenarios)
        }
      `,
      variables: { scenarios: this.scenarios }
    })

    if (response.errors?.length) return

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