<template>
  <div>
      <div v-if="['bgcolor', 'color', 'textsize'].find(x=>x===sideBar)">
        <p class="has-text-right has-text-grey is-italic fs-13">Màu sắc sẽ hiển thị theo điều kiện Đúng / Sai, mã lệnh do hệ thống tự sinh</p>
        <div class="tabs is-boxed">
          <ul> <li v-for="(v,i) in tabs" :key="i" :class="tab.code===v.code? 'is-active' : ''" @click="tab=v">
          <a>{{v.name}}</a></li> </ul>
        </div>
      </div>

      <template v-if="tab.code==='expression' && ['bgcolor', 'color', 'textsize'].find(x=>x===sideBar)">
      <div style="max-height:530px; overflow-y:auto">
      <template v-if="radio? (radio.code==='condition' && sideBar==='bgcolor') : false">
      <div v-for="(v,i) in bgcolorFilter" :key="v.id" class="px-4 mb-3" style="border: 1px solid #DCDCDC; border-radius: 10px;">
        <FilterOption v-bind="{filterObj: v, filterType: 'color', pagename: pagename, field: openField}" :ref="v.id" 
        @databack="doConditionFilter($event, 'bgcolor', v.id)" /> 
        <p class="fs-14 mt-1 has-text-centered" :class="currentField.format==='string'? 'mb-1' : 'mb-2'"> 
          <a class="has-text-primary mr-5" @click="addCondition(bgcolorFilter)" v-if="bgcolorFilter.length<=30"> Thêm </a>
          <a class="has-text-danger" @click="removeCondition(bgcolorFilter, i)" v-if="bgcolorFilter.length>1"> Bớt </a>
        </p>
      </div>
    </template>

      <template v-else-if="radio? (radio.code==='condition' && sideBar==='color') : false">
      <div v-for="(v,i) in colorFilter" :key="v.id" class="px-4 mb-3" style="border: 1px solid #DCDCDC; border-radius: 10px;">
        <FilterOption v-bind="{filterObj: v, filterType: 'color', pagename: pagename, field: openField}" :ref="v.id" 
        @databack="doConditionFilter($event, 'color', v.id)"/> 
        <p class="fs-14 mt-1 has-text-centered" :class="currentField.format==='string'? 'mb-1' : 'mb-2'"> 
          <a class="has-text-primary mr-5" @click="addCondition(colorFilter)" v-if="colorFilter.length<=30"> Thêm </a>
          <a class="has-text-danger" @click="removeCondition(colorFilter,i)" v-if="colorFilter.length>1"> Bớt </a>
        </p>
      </div>
    </template>

    <template v-else-if="radio? (radio.code==='condition' && sideBar==='textsize') : false">
    <div v-for="(v, i) in sizeFilter" :key="v.id" class="px-4 mb-3" style="border: 1px solid #DCDCDC; border-radius: 10px;">
      <FilterOption v-bind="{filterObj: v, filterType: 'size', pagename: pagename, field: openField}" :ref="v.id" 
      @databack="doConditionFilter($event, 'textsize', v.id)"/> 
      <p class="fs-14 mt-1 has-text-centered" :class="currentField.format==='string'? 'mb-1' : 'mb-2'"> 
        <a class="has-text-primary mr-5" @click="addCondition(sizeFilter)" v-if="sizeFilter.length<=30"> Thêm </a>
        <a class="has-text-danger" @click="removeCondition(sizeFilter, i)" v-if="sizeFilter.length>1"> Bớt </a>
      </p>
    </div>
    </template>
  </div>
    <!--<p class="mx-4 mt-4"><button class="button is-primary is-rounded" @click="update()">Cập nhật</button></p>-->
    </template>

    <template v-else-if="tab.code==='script' && ['bgcolor', 'color', 'textsize'].find(x=>x===sideBar)">
      <p class="my-4 mx-4">
      <a @click="copyContent(script? script : '')" class="mr-6">
          <span class="icon fs-20">
            <i class="mdi mdi-content-copy"/>
          </span>
          Copy
        </a>
        <a @click="paste()" class="mr-6">
          <span class="icon fs-20">
            <i class="mdi mdi-content-copy"/>
          </span>
          Paste
        </a>
      </p>
      <div class="mx-4">
        <textarea class="textarea fs-14" rows="8" v-model="script" @change="checkScript()" @dblclick="doCheck"></textarea>
      </div>
      <p class="mt-5 mx-4">
        <span class="icon-text fsb-18">
          Replace
          <span class="material-symbols-outlined">
          chevron_right
          </span>
        </span>
      </p>
      <div class="field is-grouped mx-4 mt-4">
        <div class="control">
          <p class="fsb-14 mb-1">Đoạn text</p>
          <input class="input" type="text" placeholder="" v-model="source">
        </div>
        <div class="control">
          <p class="fsb-14 mb-1">Thay bằng</p>
          <input class="input" type="text" placeholder="" v-model="target">
        </div>
        <div class="control pl-5">
          <button class="button is-primary is-rounded is-outlined mt-5" @click="replace()">Replace</button>
        </div>
      </div>
      <p class="mt-5 pt-2 mx-4">
        <span class="icon-text fsb-18">
          Thay đổi màu
          <span class="material-symbols-outlined">
          chevron_right
          </span>
        </span>
      </p>
      <p class="mx-4 mt-4"><button class="button is-primary is-rounded" @click="changeScript()">Cập nhật</button></p>
    </template>
    <TableOption v-bind="{pagename: pagename}" v-else-if="sideBar==='option'"> </TableOption>
    <CreateTemplate v-else-if="sideBar==='template'" v-bind="{pagename: pagename, field: openField}"> </CreateTemplate>
     </div>
</template>
<script>
export default {
  components: {
    FilterOption: () => import("@/components/datatable/FilterOption"),
    TableOption: () => import("@/components/datatable/TableOption"),
    CreateTemplate: () => import("@/components/datatable/CreateTemplate")
  },
  props: ['event', 'currentField', 'pagename'],
  data() {
    return {
      openField: {},
      bgcolorFilter: [],
      colorFilter: [],
      sizeFilter: [],
      sideBar: undefined,
      script: undefined,
      radio: undefined,
      tabs: [{code: 'expression', name: 'Biểu thức'}, {code: 'script', name: 'Mã lệnh'}],
      tab: {code: 'expression', name: 'Biểu thức'},
      source: undefined,
      target: this.$copy(this.currentField.name),
      openField: this.$copy(this.currentField)
    }
  },
  created() {
    this.openField = this.event.field
    this.sideBar = this.event.name
    this.script = this.event.script
    this.radio = this.event.radio
    let field = this.event.field
    this.bgcolorFilter = [{id: this.$id()}]
    if(field.bgcolor) {
      if(Array.isArray(field.bgcolor)) this.bgcolorFilter = this.$copy(field.bgcolor)
    }
    this.colorFilter = [{id: this.$id()}]
    if(field.color) {
      if(Array.isArray(field.color)) this.colorFilter = this.$copy(field.color)
    }
    this.sizeFilter = [{id: this.$id()}]
    if(field.textsize) {
      if(Array.isArray(field.textsize)) this.sizeFilter = field.textsize
    }
  },
  methods: {
    doCheck() {
      let text = window.getSelection().toString()
      if(this.$empty(text)) return
      this.source = text
    },
    replace() {
      if(this.$empty(this.script)) return
      this.script = this.script.replaceAll(this.source, this.target)
    },  
    async paste() {
      this.script = await navigator.clipboard.readText()
    },
    addCondition(arr) {
      arr.push({id: this.$id()})
    },
    removeCondition(arr, i) {
      this.$delete(arr, i)
    },
    copyContent(value) {
      this.$copyToClipboard(value)
    },
    checkScript() {
      if(this.$empty(this.script)) return
      try {
        JSON.parse(this.script)
      } catch (e) {
          return false;
      }
      return true;
    },
    changeScript() {
      if(!this.checkScript()) return
      let copy = this.$copy(this.openField)
      copy[this.sideBar] = JSON.parse(this.script)
      this.$emit('modalevent', {name: 'updatefields', data: copy})
      this.$buefy.toast.open('Màu / cỡ chữ đã được cập nhật')
      this.$emit('close')
    },
    doConditionFilter(v, type, id) {
       v.id = id
       let copy = this.openField
      if(copy[type]? Array.isArray(copy[type]) : false) {
        let idx = copy[type].findIndex(x=>x.id===id)
        idx>=0? copy[type][idx] = v : copy[type].push(v)
      } else copy[type] = [v]
      this.$emit('modalevent', {name: 'updatefields', data: this.openField})
    }
  }
}
</script>