<template>
  <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)">
    <template v-if="radio ? radio.code === 'condition' && sideBar === 'bgcolor' : false">
      <div v-for="(v, i) in bgcolorFilter" :key="v.id" class="px-4">
        <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" :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">
        <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" :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">
        <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" :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>
  </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-text">
          <SvgIcon class="mr-2" v-bind="{ name: 'copy.svg', type: 'primary', siz: 18 }"></SvgIcon>
          <span class="fs-16">Copy</span>
        </span>
      </a>
      <a @click="paste()" class="mr-6">
        <span class="icon-text">
          <SvgIcon class="mr-2" v-bind="{ name: 'pen1.svg', type: 'primary', siz: 18 }"></SvgIcon>
          <span class="fs-16">Paste</span>
        </span>
      </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
        <SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
      </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
        <SvgIcon v-bind="{ name: 'right.svg', type: 'dark', size: 22 }"></SvgIcon>
      </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>
</template>
<script setup>
//  FilterOption: () => import("@/components/datatable/FilterOption"),
//  TableOption: () => import("@/components/datatable/TableOption"),
//CreateTemplate: () => import("@/components/datatable/CreateTemplate")
import CreateTemplate from "~/components/datatable/CreateTemplate";
const { $id, $copy, $empty, $stripHtml } = useNuxtApp();
var props = defineProps({
  event: Object,
  currentField: Object,
  pagename: String,
});
var currentField = props.currentField;
var event = props.event;
var openField = {};
var bgcolorFilter = [];
var colorFilter = [];
var sizeFilter = [];
var sideBar = undefined;
var script = undefined;
var radio = undefined;
var tabs = [
  { code: "expression", name: "Biểu thức" },
  { code: "script", name: "Mã lệnh" },
];
var tab = { code: "expression", name: "Biểu thức" };
var source = undefined;
var target = $copy(currentField.name);

const initData = function () {
  openField = event.field;
  sideBar = event.name;
  script = event.script;
  radio = event.radio;
  let field = event.field;
  bgcolorFilter = [{ id: $id() }];
  if (field.bgcolor) {
    if (Array.isArray(field.bgcolor)) bgcolorFilter = $copy(field.bgcolor);
  }
  colorFilter = [{ id: $id() }];
  if (field.color) {
    if (Array.isArray(field.color)) colorFilter = $copy(field.color);
  }
  sizeFilter = [{ id: $id() }];
  if (field.textsize) {
    if (Array.isArray(field.textsize)) sizeFilter = field.textsize;
  }
};

const doCheck = function () {
  let text = window.getSelection().toString();
  if ($empty(text)) return;
  source = text;
};
const replace = function () {
  if ($empty(script)) return;
  script = script.replaceAll(source, target);
};
const paste = async function () {
  script = await navigator.clipboard.readText();
};
const addCondition = function (arr) {
  arr.push({ id: $id() });
};
const removeCondition = function (arr, i) {
  $delete(arr, i);
};
const copyContent = function (value) {
  $copyToClipboard(value);
};
const checkScript = function () {
  if ($empty(script)) return;
  try {
    JSON.parse(script);
  } catch (e) {
    return false;
  }
  return true;
};
const changeScript = function () {
  if (!checkScript()) return;
  let copy = $copy(openField);
  copy[sideBar] = JSON.parse(script);
  $emit("modalevent", { name: "updatefields", data: copy });
};
const doConditionFilter = function (v, type, id) {
  v.id = id;
  let copy = $copy(currentField);
  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];
  $emit("modalevent", { name: "updatefields", data: copy });
};
initData();
console.log(sideBar);
</script>
