<template>
  <v-container fluid>

    <v-row>
      <v-col cols="8">
        <v-text-field
          v-model="name"
          label="Catalog name"
          :rules="[rules.required]"
          autofocus
          class="headline font-weight-medium"
          height="30px"
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="4">
        <v-select
          v-model="season"
          :items="seasons"
          item-value="id"
          item-text="name"
          :rules="[rules.required]"
          label="Season"
        />
      </v-col>
      <v-col cols="4">
        <v-select
          v-model="region"
          :items="regions"
          item-value="id"
          item-text="name"
          :rules="[rules.required]"
          label="Region"
          class="pl-4"
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="8">
        <v-text-field
          v-model="email"
          :rules="[rules.emailRules]"
          label="Email"
          hint="Get notified when the catalog PDF is done"
          persistent-hint
        />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="4">
        <v-checkbox
          v-model="isPublic"
          label="Public"
        />
      </v-col>
      <v-col cols="4">
        <v-checkbox v-model="prices" label="Show prices"/>
      </v-col>
    </v-row>

    <v-row>
      <v-col v-if="isAdmin" cols="4">
        <v-checkbox v-model="utility" label="Is Utility?"/>
      </v-col>
      <v-col v-if="isAdmin" cols="4">
        <v-checkbox v-model="master" label="Region master"/>
      </v-col>
    </v-row>

  </v-container>
</template>

<script>
var seasons = JSON.parse(document.getElementById('seasons').textContent)
var regions = JSON.parse(document.getElementById('regions').textContent)
var lazyUser = JSON.parse(document.getElementById('lazyUser').textContent)

export default {
  data: () => ({
    seasons: seasons,
    regions: regions,
    isAdmin: false, // TODO
    rules: {
      required: value => {
        return !!value || 'Required'
      },
      emailRules: value => {
        if (!lazyUser && !value) {
          // signed-up user doesn't need email
          return true
        }
        if (!value) {
          return 'Required'
        } else {
          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          return pattern.test(value) || 'Invalid email'
        }
      },
    },
  }),
  computed: {
    name: {
      get() {
        return this.$store.getters.catalogProperty('name')
      },
      set(name) {
        this.$store.dispatch('setCatalogProperty', { key: 'name', value: name })
      }
    },

    email: {
      get() {
        return this.$store.getters.catalogProperty('email')
      },
      set(email) {
        this.$store.dispatch('setCatalogProperty', { key: 'email', value: email })
      }
    },

    season: {
      get() {
        return this.$store.getters.catalogProperty('season')
      },
      set(season) {
        this.$store.dispatch('setCatalogProperty', { key: 'season', value: season })
      }
    },

    region: {
      get() {
        return this.$store.getters.catalogProperty('region')
      },
      set(region) {
        this.$store.dispatch('setCatalogProperty', { key: 'region', value: region })
      }
    },

    master: {
      get() {
        return this.$store.getters.catalogProperty('master')
      },
      set(master) {
        this.$store.dispatch('setCatalogProperty', { key: 'master', value: master })
      }
    },

    isPublic: {
      get() {
        return this.$store.getters.catalogProperty('public')
      },
      set(isPublic) {
        this.$store.dispatch('setCatalogProperty', { key: 'public', value: isPublic })
      }
    },

    prices: {
      get() {
        return this.$store.getters.catalogProperty('show_prices')
      },
      set(showPrices) {
        this.$store.dispatch('setCatalogProperty', { key: 'show_prices', value: showPrices })
      }
    },

    utility: {
      get() {
        return this.$store.getters.catalogProperty('is_utility')
      },
      set(isUtility) {
        this.$store.dispatch('setCatalogProperty', { key: 'is_utility', value: isUtility })
      }
    },

  },
}
</script>

<style>

</style>
