<template>
  <div v-if="docid">
    <div class="field is-horizontal">
      <div class="field-body">
        <div class="field">
          <label class="label">Đối tượng</label>
          <div class="control fs-14 is-flex is-gap-2">
            <label
              v-for="(v, i) in types"
              :key="i"
              class="radio"
            >
              <input
                v-model="type"
                @input="changeType(v)"
                type="radio"
                name="type"
              />
              {{ v.name }}
            </label>
          </div>
        </div>
        <div class="field">
          <label class="label">Kích cỡ</label>
          <div class="control fs-14 is-flex is-gap-2">
            <label
              v-for="(v, i) in sizes.filter((v) =>
                type ? (type.code === 'tag' ? v.code !== 'is-small' : 1 > 0) : true,
              )"
              :key="i"
              class="radio"
            >
              <input
                v-model="size"
                @input="changeType(v)"
                type="radio"
                name="size"
              />
              {{ v.name }}
            </label>
          </div>
        </div>
        <div class="field">
          <label
            class="label"
            v-if="['tag'].find((v) => v === type.code)"
            >Hình khối</label
          >
          <div class="control fs-14 is-flex is-gap-2">
            <label
              v-for="(v, i) in shapes"
              :key="i"
              class="radio"
            >
              <input
                v-model="shape"
                @input="changeType(v)"
                type="radio"
                name="shape"
              />
              {{ v.name }}
            </label>
          </div>
        </div>
      </div>
    </div>
    <div
      class="field is-horizontal"
      v-if="['tag'].find((v) => v === type.code)"
    >
      <div class="field-body">
        <div
          class="field"
          v-if="type.code !== 'tag'"
        >
          <label class="label">Outline</label>
          <p class="control fs-14">
            <b-radio
              v-for="(v, i) in outlines"
              :key="i"
              v-model="outline"
              :native-value="v"
              @input="changeType(v)"
            >
              {{ v.name }}
            </b-radio>
          </p>
        </div>
      </div>
    </div>
    <div
      class="tags"
      v-if="type.code === 'tag'"
    >
      <a
        v-for="(v, i) in colorscheme"
        :key="i"
        :ref="'tag' + i"
        :class="getClass(v)"
        @click="doSelect(v)"
      >
        {{ v.name }}
      </a>
    </div>
    <div
      class="pt-2"
      v-else-if="type.code === 'span'"
    >
      <a
        class="mr-3"
        :class="getSpanClass(v)"
        v-for="(v, i) in colorscheme"
        :key="i"
        @click="doSelectSpan(v)"
        :ref="'span' + i"
      >
        {{ v.name }}
      </a>
    </div>
    <div :class="['tabs is-boxed', tab.code !== 'template' && 'pb-2']">
      <ul>
        <li
          v-for="(v, i) in tabs"
          :key="i"
          :class="tab.code === v.code && 'is-active'"
          @click="changeTab(v)"
        >
          <a class="has-text-inherit">{{ v.name }}</a>
        </li>
      </ul>
    </div>

    <template v-if="tab.code === 'selected'">
      <a
        v-for="(v, i) in tags"
        :key="i"
        @click="selected = v"
      >
        <div class="field is-grouped is-grouped-multiline mt-4">
          <p class="control">
            <a :class="v.class">
              {{ v.name }}
            </a>
          </p>
          <p class="control">
            <input
              class="input is-small"
              type="text"
              v-model="v.name"
            />
          </p>
          <p class="control">
            <a @click="remove(i)">
              <Icon
                name="material-symbols:close-rounded"
                :size="20"
                class="has-text-danger"
              />
            </a>
          </p>
          <p
            v-if="selected?.id === v.id"
            class="control has-text-right"
          >
            <Icon
              name="material-symbols:check-rounded"
              :size="20"
            />
          </p>
        </div>
      </a>
    </template>

    <template v-else-if="tab.code === 'condition'">
      <div
        v-if="selected"
        class="mb-5 control"
      >
        <label
          v-for="(v, i) in conditions"
          :key="i"
          class="radio is-block"
        >
          <input
            type="radio"
            name="condition"
            :value="v"
            v-model="condition"
            @change="changeCondition(v)"
          />
          {{ v.name }}
        </label>
      </div>

      <template v-if="condition ? condition.code === 'yes' : false">
        <div class="field mt-3">
          <label class="label fs-14"
            >Chọn trường xây dựng biểu thức
            <span class="has-text-danger"> * </span>
          </label>
          <div class="control">
            <b-taginput
              size="is-small"
              v-model="tagsField"
              :data="pageData ? pageData.fields.filter((v) => v.format === 'number') : []"
              type="is-dark is-light"
              autocomplete
              :open-on-focus="true"
              field="name"
              icon="plus"
              placeholder="Chọn trường"
            >
              <template slot-scope="props">
                <span class="mr-3 has-text-danger has-text-weight-bold"> {{ props.option.name }}</span>
                <span :class="tagsField.find((v) => v.id === props.option.id) ? 'has-text-dark' : ''">
                  {{ $stripHtml(props.option.label, 50) }}
                </span>
              </template>
              <template slot="empty"> Không có trường thỏa mãn </template>
            </b-taginput>
          </div>
          <p
            class="help has-text-danger"
            v-if="errors.find((v) => v.name === 'tagsField')"
          >
            {{ errors.find((v) => v.name === "tagsField").message }}
          </p>
        </div>
        <div
          class="field mt-1"
          v-if="tagsField.length > 0"
        >
          <p class="help is-primary">Click đúp vào để thêm vào biểu thức.</p>
          <div class="tagsField">
            <a
              @dblclick="expression = expression ? expression + ' ' + v.name : v.name"
              class="tag is-rounded"
              v-for="(v, i) in tagsField"
              :key="i"
            >
              <span class="tooltip">
                {{ v.name }}
                <span class="tooltiptext">{{ $stripHtml(v.label) }}</span>
              </span>
            </a>
          </div>
        </div>
        <div class="field">
          <label class="label fs-14"
            >Biểu thức có dạng Đúng / Sai
            <span class="has-text-danger"> * </span>
          </label>
          <p class="control is-expanded">
            <input
              class="input"
              type="text"
              v-model="expression"
              placeholder="Tạo biểu thức tại đây"
            />
          </p>
          <p
            class="help has-text-danger"
            v-if="errors.find((v) => v.name === 'expression')"
          >
            {{ errors.find((v) => v.name === "expression").message }}
          </p>
        </div>
      </template>
    </template>

    <template v-else-if="tab.code === 'option' && selected">
      <div class="field is-horizontal border-bottom pb-2 mt-1">
        <div class="field-body">
          <div class="field">
            <label class="label fs-14">Màu nền </label>
            <p class="control fs-14">
              <b-radio
                v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
                :key="i"
                v-model="radioBGcolor"
                :native-value="v"
                @input="changeStyle()"
              >
                {{ v.name }}
              </b-radio>
            </p>
          </div>
          <div
            class="field"
            v-if="radioBGcolor ? radioBGcolor.code === 'option' : false"
          >
            <label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
            <p class="control fs-14">
              <input
                type="color"
                v-model="bgcolor"
                @change="changeStyle()"
              />
            </p>
          </div>
        </div>
      </div>

      <div class="field is-horizontal border-bottom pb-2">
        <div class="field-body">
          <div class="field">
            <label class="label fs-14">Màu chữ </label>
            <p class="control fs-14">
              <b-radio
                v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
                :key="i"
                v-model="radioColor"
                :native-value="v"
                @input="changeStyle()"
              >
                {{ v.name }}
              </b-radio>
            </p>
          </div>
          <div
            class="field"
            v-if="radioColor ? radioColor.code === 'option' : false"
          >
            <label class="label fs-14"> Mã màu <span class="has-text-danger"> * </span> </label>
            <p class="control fs-14">
              <input
                type="color"
                v-model="color"
                @change="changeStyle()"
              />
            </p>
          </div>
        </div>
      </div>
      <div class="field is-horizontal border-bottom pb-2">
        <div class="field-body">
          <div class="field">
            <label class="label fs-14">Cỡ chữ </label>
            <p class="control fs-14">
              <b-radio
                v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
                :key="i"
                v-model="radioSize"
                :native-value="v"
                @input="changeStyle()"
              >
                {{ v.name }}
              </b-radio>
            </p>
          </div>
          <div
            class="field"
            v-if="radioSize ? radioSize.code === 'option' : false"
          >
            <label class="label fs-14"> Cỡ chữ <span class="has-text-danger"> * </span> </label>
            <p class="control fs-14">
              <input
                class="input is-small"
                type="text"
                placeholder="Nhập số"
                v-model="textsize"
                @change="changeStyle()"
              />
            </p>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="tab.code === 'template'">
      <div class="buttons has-addons mb-3">
        <button
          @click="copyContent()"
          class="button is-primary is-light fs-14"
        >
          <span class="icon">
            <Icon
              name="material-symbols:content-copy-outline-rounded"
              :size="18"
            />
          </span>
          <span>Copy</span>
        </button>
        <button
          @click="paste()"
          class="button is-primary is-light fs-14"
        >
          <span class="icon">
            <Icon
              name="material-symbols:content-paste-rounded"
              :size="18"
            />
          </span>
          <span>Paste</span>
        </button>
      </div>
      <div>
        <textarea
          class="textarea fs-13"
          style="font-family: monospace"
          rows="4"
          v-model="text"
          @dblclick="doCheck"
        ></textarea>
      </div>
      <p class="mt-5">
        <span class="icon-text">
          <span class="fs-17 font-semibold">Replace</span>
          <span class="icon">
            <Icon
              name="material-symbols:arrow-forward-ios-rounded"
              :size="18"
            />
          </span>
        </span>
      </p>
      <div class="field is-grouped mt-4">
        <div class="control">
          <label class="label">Đoạn text</label>
          <input
            class="input"
            type="text"
            v-model="source"
          />
        </div>
        <div class="control">
          <label class="label">Thay bằng</label>
          <input
            class="input"
            type="text"
            v-model="target"
          />
        </div>
        <div class="control">
          <label
            class="label"
            style="opacity: 0"
            >Hidden</label
          >
          <button
            class="button is-primary is-light"
            @click="replace()"
          >
            Replace
          </button>
        </div>
      </div>
      <p class="mt-5">
        <button
          class="button is-primary has-text-white"
          @click="changeTemplate()"
        >
          Áp dụng
        </button>
      </p>
    </template>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useStore } from "~/stores/index";
const store = useStore();
const { $id, $copy, $empty, $stripHtml, $calc, $remove, $copyToClipboard } = useNuxtApp();
var props = defineProps({
  pagename: String,
  field: Object,
});
var colorscheme = store.colorscheme;
var colorchoice = store.colorchoice;
var pageData = store[props.pagename];
var field = props.field;
var type = undefined;
var size = undefined;
var types = [
  { code: "span", name: "span" },
  { code: "tag", name: "tag" },
];
var sizes = [
  { code: "is-small", name: "Nhỏ", value: "is-size-6" },
  { code: "is-normal", name: "Trung bình", value: "is-size-5" },
  { code: "is-medium", name: "Lớn", value: "is-size-4" },
];
var shapes = [
  { code: "default", name: "Mặc định" },
  { code: "is-rounded", name: "Tròn góc" },
];
var shape = undefined;
var outlines = [
  { code: "default", name: "Mặc định" },
  { code: "is-outlined", name: "Outline" },
];
var outline = undefined;
var conditions = [
  { code: "no", name: "Không áp dụng" },
  { code: "yes", name: "Có áp dụng" },
];
var condition = undefined;
const tags = ref([]);
var selected = undefined;
var tabs = [
  { code: "selected", name: "Bước 1: Tạo nội dung" },
  { code: "condition", name: "Bước 2: Đặt điều kiện" },
  { code: "option", name: "Bước 3: Chọn màu, cỡ chữ" },
  { code: "template", name: "Bước 4: Mã lệnh & áp dụng" },
];
var tab = ref(undefined);
var tagsField = [];
var errors = [];
var expression = "";
var text = ref(null);
var radioBGcolor = undefined;
var radioColor = undefined;
var radioSize = undefined;
var bgcolor = undefined;
var color = undefined;
var textsize = undefined;
var source = undefined;
var target = $copy(field.name);

const initData = function () {
  type = types.find((v) => v.code === "tag");
  size = sizes.find((v) => v.code === "is-normal");
  shape = shapes.find((v) => v.code === "is-rounded");
  outline = shapes.find((v) => v.code === "default");
  if ($empty(field.template)) tab.value = tabs.find((v) => v.code === "selected");
  else {
    text.value = $copy(field.template);
    tab.value = tabs.find((v) => v.code === "template");
  }
  condition = conditions.find((v) => v.code === "no");
};
/*watch: {
    expression(newVal) {
      if($empty(newVal)) return
      elsecheckExpression()
    },
    tab(newVal, oldVal) {
      if(oldVal===undefined) return
      if(newVal.code==='template') {
        let value = '<div>'
       tags.map((v,i)=>{
          value += '<span class="' + v.class + (tags.length>i+1? ' mr-2' : '') + '" '
          if(v.style) value += 'style="' +  v.style + '" '
          value += (v.expression? ' v-if="' + v.expression +  '"' : '') + '>' + v.name + '</span>' 
        })
        value += '</div>'
       text = value
      } else if(newVal.code==='option') {
        if(!selected) return
       radioBGcolor =selected.bgcolor?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
       radioColor =selected.color?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
       radioSize =selected.textsize?colorchoice.find(v=>v.code==='option') :colorchoice.find(v=>v.code==='none')
       bgcolor =selected.bgcolor?selected.bgcolor : undefined
       color =selected.color?selected.color : undefined
       textsize =selected.textsize?selected.textsize : undefined
      } else if(newVal.code==='condition') {
       condition = conditions.find(v=>v.code==='no')
       tagsField = []
       expression = ''
        if(selected?selected.expression : false) {
         condition =conditions.find(v=>v.code==='yes')
         tagsField =$copy(selected.tags)
         expression =$copy(selected.formula)
        }
      }
    }
  },*/
function changeTab(v) {
  tab.value = v;
}
const paste = async function () {
  text.value = await navigator.clipboard.readText();
};
const replace = function () {
  if ($empty(text.value)) return;
  text.value = text.value.replaceAll(source, target);
};
const doCheck = function () {
  let text = window.getSelection().toString();
  if ($empty(text)) return;
  source = text;
};
const changeStyle = function () {
  selected.bgcolor = selected.color = selected.textsize = selected.style = undefined;
  let style = "";
  if (radioBGcolor.code === "option" ? !$empty(bgcolor) : false) {
    selected.bgcolor = bgcolor;
    style += "background-color: " + bgcolor + " !important; ";
  }
  if (radioColor.code === "option" ? !$empty(color) : false) {
    selected.color = color;
    style += "color: " + color + " !important; ";
  }
  if (radioSize.code === "option" ? $isNumber(textsize) : false) {
    selected.textsize = textsize;
    style += "font-size: " + textsize + "px !important; ";
  }
  $empty(style) ? false : (selected.style = style);
};
const changeCondition = function (v) {
  if (v.code === "no") selected.expression = undefined;
};
const copyContent = function () {
  $copyToClipboard(text.value);
};
const changeTemplate = function () {
  let copy = pageData;
  let found = copy.fields.find((v) => v.name === field.name);
  found.template = text.value;
  store.commit(props.pagename, copy);
};
const checkExpression = function () {
  errors = [];
  let val = $copy(expression);
  let exp = $copy(expression);
  tagsField.forEach((v) => {
    let myRegExp = new RegExp(v.name, "g");
    val = val.replace(myRegExp, Math.random());
    exp = exp.replace(myRegExp, "formatNumber(row['" + v.name + "'])");
  });
  try {
    let value = $calc(val);
    if (isNaN(value) || value === Number.POSITIVE_INFINITY || value === Number.NEGATIVE_INFINITY) {
      errors.push({ name: "expression", message: "Biểu thức không hợp lệ" });
    } else if (!(eval(value) === true || eval(value) === false)) {
      errors.push({ name: "expression", message: "Biểu thức không hợp lệ" });
    } else if (selected) {
      selected.expression = exp;
      selected.formula = expression;
      selected.tags = $copy(tagsField);
    }
  } catch (err) {
    errors.push({ name: "expression", message: "Biểu thức không hợp lệ" });
  }
  returnerrors.length > 0 ? false : true;
};
const changeType = function (v) {};
const doSelect = function (v) {
  tags.value.push({ id: $id(), name: v.name, class: getClass(v) });
  tab.value = tabs.find((v) => v.code === "selected");
  selected = tags.value[tags.value.length - 1];
};
const doSelectSpan = function (v) {
  tags.value.push({ id: $id(), name: v.name, class: getSpanClass(v) });
  tab.value = tabs.find((v) => v.code === "selected");
  selected = tags.value[tags.value.length - 1];
};
const remove = function (i) {
  tags.value.splice(i, 1);
};
const getClass = function (v) {
  let value = type.code + " " + v.code + " " + size.code + (shape.code === "default" ? "" : " " + shape.code);
  value += outline.code === "default" ? "" : " " + outline.code;
  return value;
};
const getSpanClass = function (v) {
  let value = "has-text-" + v.name.toLowerCase() + " " + size.value;
  return value;
};
initData();
var docid = $id();
</script>
