<template>
  <BaseFormModal @confirm="saveFilter()" @cancel="$emit('hide')">
    <template #header-title>
      Create new filter
    </template>

    <template #content>
      <b-field label="Filter name">
        <b-input v-model="filterName" />
      </b-field>
      <b-field label="SQL query">
        <b-input v-model="sqlQuery" />
      </b-field>
    </template>

    <template #cancel-button>
      Cancel
    </template>
    <template #confirm-button>
      Save filter
    </template>
  </BaseFormModal>

  <!-- <section>

    <b-modal :active="show" :on-cancel="close" :width="1200" destroy-on-hide>
      <div class="card">
        <div class="card-content">
          <h1 class="title">Create new filter</h1>
          <section>
            <b-field label="Filter name">
              <b-input :filterName="filterName"></b-input>
            </b-field>
            <b-field label="SQL query">
              <b-input :sqlQuery="sqlQuery"></b-input>
            </b-field>
          </section>

          <section class="buttons">
            <b-button type="is-danger" size="is-small" outlined @click="close()"
              >Close</b-button
            >
            <b-button
              type="is-primary"
              size="is-small"
              :disabled="hasError"
              @click="saveFilter()"
              >Save filter</b-button
            >
          </section>
        </div>
      </div>
    </b-modal>
    
  </section> -->
</template>

<script>
export default {
  name: 'CreateFilterModal',

  data() {
    return {
      filterName: '',
      sqlQuery: ''
    }
  },

  methods: {
    close() {
      this.$emit('hide')
    },

    saveFilter() {
      this.$emit('save', { name: this.filterName, query: this.sqlQuery })
      this.filterName = ''
      this.sqlQuery = ''
      // console.log('hej hou')
      this.$emit('hide')
    }
  }
}
</script>

<style lang="sass" scoped>
.card
  min-height: 100%
  height: 100%

section
  margin-bottom: 2.5em
  h2.title.is-6
    margin-bottom: 1rem

.tag
  cursor: pointer
  &.tag-name
    width: 10em
    text-align: left
    justify-content: left

label.label
  font-size: 0.8rem
  margin-bottom: 0.2em
</style>

<style lang="sass">
#dataset-editor-textarea textarea
  max-height: 70vh
  min-height: 70vh

#dataset-editor-textarea textarea.shorter
  max-height: 60vh
  min-height: 60vh
</style>
