Vue.component('event-form-questions', {
  inject: ['_f','_get','validate'],
  props: {
    questions: {
      type: Array,
    },
    submitted: {
      type: Boolean,
      default: false,
    },
    ticket_id: {
      type: [Number, String],
    },
    upload_errors: {
      type: Object,
      default: ()=> ({
        show_required: false,
        display: false,
        messages: [],
      })
    },
    allow_file_types: {
      type: Array,
      default: ()=> (['image/jpg', 'image/jpeg', 'image/png', 'image/gif']),
    },
    processFile: {
      type: Function,
    },
    sticky_top: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    area_codes() {
      return [
        { value: '+853', text: '+853' },
        { value: '+852', text: '+852' },
        { value: '+86', text: '+86' },
        { value: '+886', text: '+886' },
        { value: '+', text: '('+this.$t('general.others')+')' },
      ];
    },
    isInWhiteLabel() {
      return localStorage.getItem('isInWhiteLabel')
    },
    whiteLabel() {
      return {
        white_label_name: localStorage.getItem('brandName'),
        white_label_color: localStorage.getItem('brandColor'),
        white_label_mode: localStorage.getItem('brandDark'),
        white_label_logo: localStorage.getItem('brandLogo')
      }
    }
  },
  data() {
    return {

    }
  },
  mounted() {
  },
  methods:{
    convertHtmlLink (s = "") {
      return s?s.replace(/(https?:\/\/)[\w\-~]+(\.[\w\-~]+)+(\/[\w\-~@:%]*)*(#[\w\-]*)?(\?[^\s]*)?/gi, '<a href="$&" target="_blank" rel="noopener">$&</a>'):s;
    }
  },
  template:
`<v-form style="width:100%" ref="form">
  <div v-for="(question, q_index) in questions" :key="q_index" class="mb-2">
    <v-row no-gutters v-if="question.type == 'full_name'">
      <v-col cols="12">
        <span class="subheading font-weight-medium">
          {{ $t('EventFormsTab.fullName') }}
        </span>
        <span class="subheading error--text">*</span>
      </v-col>
      <v-col cols="12">
        <v-row dense>
          <v-col cols="12" sm="6">
            <v-text-field
              v-model="question.answer[0]"
              :label="$t('input.lastName.label')"
              :id="'lastName_' + ticket_id + q_index"
              dense
              :rules="[
                v=>(!!v) || $t('validation.required',{field: $t('input.lastName.label')}),
              ]"
              :hide-details="submitted?'auto':true"
              single-line
              outlined
            ></v-text-field>
          </v-col>
          <v-col cols="12" sm="6">
            <v-text-field
              v-model="question.answer[1]"
              :label="$t('input.firstName.label')"
              :id="'firstName_' + ticket_id + q_index"
              dense
              :rules="[
                v=>(!!v) || $t('validation.required',{field: $t('input.lastName.label')}),
              ]"
              :hide-details="submitted?'auto':true"
              single-line
              outlined
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <v-row no-gutters v-else-if="question.type == 'email'">
      <v-col cols="12" class="py-0">
        <span class="subheading font-weight-medium">
          {{ $t('EventFormsTab.email') }}
        </span>
        <span class="subheading font-weight-medium error--text">*</span>
      </v-col>
      <v-col cols="12">
        <v-row dense>
          <v-col cols="12">
            <v-text-field
              v-model="question.answer"
              :label="$t('input.email.label')"
              dense
              :rules="[
                v=>(!!v) || $t('validation.required',{field: $t('input.email.label')}),
                v => validate('email', v) || $t('validation.email', {field:$t('input.email.label')}),
                v => validate('email_characters', v) || $t('validation.email_characters', {field:$t('input.email.label')}),
              ]"
              :hide-details="submitted?'auto':true"
              single-line
              type="email"
              outlined
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <v-row no-gutters v-else-if="question.type == 'phone'">
      <v-col cols="12" class="py-0">
        <span class="subheading font-weight-medium">
          {{ $t('EventFormsTab.contactNumber') }}
        </span>
        <span class="subheading font-weight-medium error--text">*</span>
      </v-col>
      <v-col cols="12">
        <v-row dense>
          <v-col cols="12" sm="4" md="3">
            <v-select
              v-model="question.answer[0]"
              :label="$t('input.area_code.label')"
              :id="'areacode_' + ticket_id + q_index"
              dense
              :rules="[
                v=>(!!v) || $t('validation.required',{field: $t('input.area_code.label')}),
              ]"
              :hide-details="submitted?'auto':true"
              :items="area_codes"
              single-line
              outlined
            ></v-select>
          </v-col>
          <v-col cols="12" sm="8" md="9">
            <v-text-field
              v-model="question.answer[1]"
              :label="$t('input.phone.label')"
              :id="'phone_' + ticket_id + q_index"
              dense
              :rules="[
                v=>(!!v) || $t('validation.required',{field: $t('input.phone.label')}),
                v=>(!v || /^[0-9]{2,}$/.test(v)) || $t('validation.numeric',{field: $t('input.phone.label')}),
                v=>(!v || v.length>=5) || $t('validation.min',{field: $t('input.phone.label'),min:5}),
                v=>(!v || v.length<=16) || $t('validation.max',{field: $t('input.phone.label'),max:16}),
              ]"
              :hide-details="submitted?'auto':true"
              single-line
              outlined
            ></v-text-field>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <v-row no-gutters v-else>
      <!-- question title and description -->
      <v-col cols="12" class="question" :style="'top:'+sticky_top+'px'">
        <div v-if="question.type=='text_block'" :class="{'ql-editor pa-0':question.type=='text_block'}">
          <span class="subheading font-weight-medium" v-html="convertHtmlLink(_f(question.fields, 'title'))"></span>
        </div>
        <div v-else>
          <span class="subheading font-weight-medium" v-html="convertHtmlLink(_f(question.fields, 'title'))"></span>
          <span v-if="question.type!='text_block' && question.is_required" class="subheading font-weight-medium error--text">*</span>
        </div>
        <div v-if="question.type!='text_block' && _f(question.fields, 'description')">
          <span class="caption" v-html="convertHtmlLink(_f(question.fields, 'description'))"></span>
        </div>
      </v-col>
      <!-- question answer -->
      <v-col cols="12" v-if="question.type!='text_block'">
        <div>
          <v-text-field
            v-if="question.type == 'text'"
            v-model="question.answer"
            outlined
            single-line
            dense
            :rules="question.is_required?[
              v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
            ]:[]"
            :hide-details="submitted?'auto':true"
          ></v-text-field>
          <v-textarea
            v-else-if="question.type == 'textarea'"
            v-model="question.answer"
            outlined
            single-line
            dense
            rows="3"
            auto-grow
            :rules="question.is_required?[
              v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
            ]:[]"
            :hide-details="submitted?'auto':true"
          ></v-textarea>
          <v-row no-gutters v-else-if="question.type == 'radio'">
            <v-radio-group
              v-model="question.answer"
              dense
              :rules="question.is_required?[
                v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
              ]:[]"
              :hide-details="submitted?'auto':true"
              class="ma-0"
              row
            >
              <v-col cols="auto" class="py-1 px-0" v-for="(option, index) in question.options" :key="index">
                <v-radio
                  :label="option"
                  :value="option"
                  color="primary"
                  class="pt-1"
                ></v-radio>
              </v-col>
              <v-col cols="auto" class="py-1 px-0" v-if="question.is_shown_extra">
                <v-radio
                  :label="(question.answer_extra=='__other'&&question.answer)?'':$t('EventFormsTab.other')"
                  value="__other"
                  color="primary"
                  dense
                  :rules="question.is_required?[
                    v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
                  ]:[]"
                  :hide-details="submitted?'auto':true"
                  class="my-0 pt-1 pb-0 pr-0"
                  multiple
                ></v-radio>
                <v-text-field
                  v-if="question.answer=='__other'"
                  v-model="question.answer_extra"
                  single-line
                  dense
                  :rules="question.is_required?[
                    v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
                  ]:[]"
                  :hide-details="submitted?'auto':true"
                  class="pa-0 ma-0"
                ></v-text-field>
              </v-col>
            </v-radio-group>
          </v-row>
          <v-row no-gutters v-else-if="question.type == 'checkbox'">
            <v-col cols="auto" class="py-1 px-0" v-for="(option, index) in question.options" :key="index">
              <v-checkbox
                v-model="question.answer"
                :label="option"
                :value="option"
                color="primary"
                dense
                :rules="question.is_required?[
                  v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
                ]:[]"
                :hide-details="submitted?'auto':true"
                class="my-0 pr-3 mr-1"
                multiple
              ></v-checkbox>
            </v-col>
            <v-col cols="auto" class="py-1 px-0" v-if="question.is_shown_extra">
              <v-row ma-0 pa-0>
                <v-checkbox
                  v-model="question.answer"
                  :label="$t('EventFormsTab.other')"
                  :value="'__other'"
                  color="primary"
                  dense
                  :rules="question.is_required?[
                    v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
                  ]:[]"
                  :hide-details="submitted?'auto':true"
                  class="my-0 pb-0 pr-2"
                  multiple
                ></v-checkbox>
                <v-text-field
                  v-if="question.answer&&question.answer.includes('__other')"
                  v-model="question.answer_extra"
                  single-line
                  dense
                  :rules="question.is_required?[
                    v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
                  ]:[]"
                  :hide-details="submitted?'auto':true"
                  @input="question.answer_extra = question.answer_extra.replace(/,/g,' ')"
                  class="pa-0 ma-0"
                ></v-text-field>
              </v-row>
            </v-col>
          </v-row>
          <v-select
            v-else-if="question.type == 'select'"
            v-model="question.answer"
            :items="question.options"
            dense
            :rules="question.is_required?[
              v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
            ]:[]"
            :hide-details="submitted?'auto':true"
            chips
            outlined
            single-line
            clearable
            :multiple="question.is_multiple == 1"
          ></v-select>
          <v-menu
            v-else-if="question.type == 'date'"
            v-model="question.date_menu"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                readonly
                dense
                :rules="question.is_required?[
                  v=>(!!v) || $t('validation.required',{field: _f(question.fields, 'title')}),
                ]:[]"
                :hide-details="submitted?'auto':true"
                v-model="question.answer"
                outlined
                single-line
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker no-title v-model="question.answer" @input="question.date_menu = false"></v-date-picker>
          </v-menu>
          <v-row no-gutters v-else-if="question.type == 'file'" style="cursor: pointer">
            <v-col cols="12">
              <v-row 
                dense 
                class="ma-0" 
                align="center" 
                style="border: 1px solid grey; width: 100%; height: 4rem; border-radius: 5px"
                v-on:click="$el.querySelector('#image_' + ticket_id + '_' + q_index).click()"
              >
                <v-col cols="auto" style="width: 4rem;" class="text-center">
                  <div :id="'image_preview_' + ticket_id + '_'  + q_index">
                    <v-icon>mdi-image-plus</v-icon>
                  </div>
                </v-col>
                <v-divider vertical></v-divider>
                <v-col class="pl-3">
                  <div class="body-1" style="color: grey">
                    {{ $t('EventFormsTab.maximumSize') }}
                  </div>
                  <div :id="'image_name_' + ticket_id + '_'  + q_index" class="subheading">
                    {{ $t('EventFormsTab.noFileChosen') }}
                  </div>
                </v-col>
              </v-row>
            </v-col>
            <input 
              style="display: none" 
              :id="'image_' + ticket_id + '_'  + q_index" 
              type="file" 
              :accept="allow_file_types.join(',')"
              :name="'image_' + ticket_id + '_'  + q_index"
              @change="processFile(ticket_id + '_'  + q_index, $event)" 
              :ref="'image_' + ticket_id + '_'  + q_index"
            />
            <v-col cols="12" v-if="question.answer || upload_errors.show_required[ticket_id + '_' + q_index] || upload_errors.display[ticket_id + '_' + q_index]">
              <div v-if="question.answer" style="color: red">{{ "已上載檔案：" + (question.answer ? question.answer : "") }}</div>
              <v-alert class="w-adjust" type="error" v-model="upload_errors.show_required[ticket_id + '_' + q_index]" :ref="'error_' + ticket_id + '_'  + q_index" transition="slide-y-transition">
                <b>{{ $t('error.image.required') }}</b>
              </v-alert>
              <v-alert class="w-adjust" type="warning" v-model="upload_errors.display[ticket_id + '_' + q_index]" :ref="'warning_' + ticket_id + '_'  + q_index" transition="slide-y-transition">
                <b>{{ $t('error.image.reasons') }}</b>
                <ul>
                  <li class="ml-3">
                    {{upload_errors.messages[ticket_id + '_' + q_index]}}
                  </li>
                </ul>
              </v-alert>
            </v-col>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </div>
</v-form>`
});