<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
<!-- Template -->
<template>
  <div class="view-container container-fluid">

    <b-card class="title-container container">
      <h5 class="my-0">
        <span class="badge badge-secondary">Sample 1</span>
        <span>Selector</span>
      </h5>
    </b-card>

    <b-card class="form-container container">
      <div class="form-container container">
        <b-form class="needs-validation" v-validator="validator" novalidate @reset="onReset" v-if="show" ref="form">

          <b-row>
            <b-form-group horizontal class="col-md-6" label="Email address:" label-for="email" description="email  input." valid-feedback="valid-feedback">
              <b-form-input id="email" name="email" type="email" v-model="form.email" placeholder="Enter email" ref="email"></b-form-input>
            </b-form-group>
            <b-form-group horizontal class="col-md-6" label="Email validator trigger:">
              <b-button type="button" variant="outline-primary" size="sm" @click="emailValidatorHandler()">
                Email Validator
              </b-button>
            </b-form-group>
          </b-row>
          <b-row>
            <b-form-group horizontal class="col-md-6" label="Password:" label-for="password" description="password  input." valid-feedback="valid-feedback">
              <b-form-input id="password" name="password" type="password" v-model="form.password" placeholder="Enter password" ref="password"></b-form-input>
            </b-form-group>
            <b-form-group horizontal class="col-md-6" label="Password validator trigger:">
              <b-button type="button" variant="outline-primary" size="sm" @click="passwordValidatorHandler()">
                Password Validator
              </b-button>
            </b-form-group>
          </b-row>

          <b-row>
            <b-form-group horizontal class="col-md-6" label="Address:" label-for="address" description="address selector." valid-feedback="valid-feedback">
              <b-form-input id="address" name="address" type="text" v-model="form.address" placeholder="Selector address" v-selector="addressTriggerEvent" ref="address"></b-form-input>
            </b-form-group>
            <b-form-group horizontal class="col-md-6" label="Address change trigger:" v-if="showAddressChangeTrigger">
              <b-button type="button" variant="outline-primary" size="sm" @click="addressValidatorHandler()">
                Address Selector Change Validator
              </b-button>
            </b-form-group>
          </b-row>


          <b-row>
            <b-form-group class="col-md-12 text-center">
              <b-button type="submit" variant="outline-primary" size="sm">Submit</b-button>
              <b-button type="reset" variant="outline-secondary" size="sm">Reset</b-button>
            </b-form-group>
          </b-row>
        </b-form>
      </div>
    </b-card>

  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';
  import {REGEX_MAIL, REGEX_USER_PASSWORD} from "../../../../basement/utils/regex-pattern";

  const _GuideSampleSelector = {
    name: 'GuideSampleSelector',
    created: function () {
    },
    updated: function () {
    },
    mounted: function () {
    },
    activated: function () {
    },
    data: function () {
      const _self = this;
      return {
        showAddressChangeTrigger: false,
        addressTriggerEvent() {
          console.log('Selector > addressTriggerEvent', _self.$refs.address);
          _self.showAddressChangeTrigger = true;
        },

        validator: {
          rules: {
            email: {
              required: true,
              regex: REGEX_MAIL
            },
            password: {
              required: true,
              regex: REGEX_USER_PASSWORD
            },
            address: {
              required: true
            }
          },
          message: {
            email: {
              required: 'email required',
              regex: 'regex : email invalid'
            },
            password: {
              required: 'password required',
              regex: 'regex : password invalid'
            },
            address: {
              required: 'address required'
            }
          },
          submitHandler: function () {
            _self.onSubmit();
          }
        },
        form: {
          email: undefined,
          password: undefined,
          address: undefined
        },
        show: true
      };
    },
    methods: {
      onSubmit() {
        console.log(this.$refs.form);
        console.log(this.form);
      },
      onReset(evt) {
        evt.preventDefault();
        /* Reset our form values */
        this.form.email = undefined;
        this.form.password = undefined;
        this.form.address = undefined;
        /* Trick to reset/clear native browser form validation state */
        this.show = false;
        this.$nextTick(() => {
          this.show = true
        });
      },

      emailValidatorHandler() {
        console.log('Selector > emailValidatorHandler');
        triggerValidatorElementEvent(this.$refs.email.$el);
      },

      passwordValidatorHandler() {
        console.log('Selector > passwordValidatorHandler');
        triggerValidatorElementEvent(this.$refs.password.$el);
      },

      addressValidatorHandler() {
        console.log('Selector > addressValidatorHandler');
        const _value = '123456';
        this.form.address = _value;
        triggerSelectorChangeEvent(this.$refs.address.$el, _value);
      }

    },
    components: {},
    computed: {
      ...mapGetters([])
    }
  };
  export default _GuideSampleSelector;
</script>
