<template>
  <div class="fixed-grid has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-4">
        <div class="box">
          <label class="label fs-14">Cỡ chữ của bảng</label>
          <p class="control fs-14">
            <input
              class="input fs-13"
              type="text"
              :value="tablesetting.find((v) => v.code === 'table-font-size').detail"
              @change="changeSetting($event.target.value, 'table-font-size')"
            />
          </p>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="box">
          <label class="label fs-14">Cỡ chữ tiêu đề</label>
          <p class="control">
            <input
              class="input fs-13"
              type="text"
              :value="tablesetting.find((v) => v.code === 'header-font-size').detail"
              @change="changeSetting($event.target.value, 'header-font-size')"
            />
          </p>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="box">
          <label class="label fs-14">Số dòng trên 1 trang</label>
          <p class="control">
            <input
              class="input fs-13"
              type="text"
              :value="tablesetting.find((v) => v.code === 'per-page').detail"
              @change="changeSetting($event.target.value, 'per-page')"
            />
          </p>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="box">
          <label class="label fs-14">Màu nền bảng</label>
          <p class="control is-flex is-gap-1">
            <input
              type="color"
              :value="tablesetting.find((v) => v.code === 'table-background').detail"
              @change="changeSetting($event.target.value, 'table-background')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="tablesetting.find((v) => v.code === 'table-background').detail"
              @change="changeSetting($event.target.value, 'table-background')"
            />
          </p>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="box">
          <label class="label fs-14">Màu chữ</label>
          <p class="control is-flex is-gap-1">
            <input
              type="color"
              :value="tablesetting.find((v) => v.code === 'table-font-color').detail"
              @change="changeSetting($event.target.value, 'table-font-color')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="tablesetting.find((v) => v.code === 'table-font-color').detail"
              @change="changeSetting($event.target.value, 'table-font-color')"
            />
          </p>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="box">
          <label class="label fs-14">Màu chữ tiêu đề</label>
          <p class="control is-flex is-gap-1">
            <input
              type="color"
              :value="tablesetting.find((v) => v.code === 'header-font-color').detail"
              @change="changeSetting($event.target.value, 'header-font-color')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="tablesetting.find((v) => v.code === 'header-font-color').detail"
              @change="changeSetting($event.target.value, 'header-font-color')"
            />
          </p>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="box">
          <label class="label fs-14">Màu nền tiêu đề</label>
          <div class="control is-flex is-gap-1 is-align-items-stretch">
            <input
              type="color"
              :value="rgbToHex(headerBg)"
              @change="changeSetting($event.target.value, 'header-background')"
            />
            <input
              class="input fs-13 h-full"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="tablesetting.find((v) => v.code === 'header-background').detail"
              @change="changeSetting($event.target.value, 'header-background')"
            />

            <div
              ref="renderedHeaderBg"
              class="is-hidden"
              :style="{
                backgroundColor: tablesetting.find((v) => v.code === 'header-background').detail,
              }"
            ></div>
          </div>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="box">
          <label class="label fs-14">Màu chữ khi filter</label>
          <p class="control is-flex is-gap-1">
            <input
              type="color"
              :value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
              @change="changeSetting($event.target.value, 'header-filter-color')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
              @change="changeSetting($event.target.value, 'header-filter-color')"
            />
          </p>
        </div>
      </div>
      <div class="cell is-col-span-6">
        <div class="box">
          <label class="label fs-14">Đường viền</label>
          <p class="control fs-14">
            <input
              class="input fs-13"
              type="text"
              :value="
                tablesetting.find((v) => v.code === 'td-border')
                  ? tablesetting.find((v) => v.code === 'td-border').detail
                  : undefined
              "
              @change="changeSetting($event.target.value, 'td-border')"
            />
          </p>
        </div>
      </div>
    </div>
  </div>
  <button
    class="button is-primary"
    @click="emit('close')"
  >
    Cập nhật
  </button>
</template>
<script setup>
const props = defineProps({
  pagename: String,
});
const emit = defineEmits(["close"]);
const { $copy, $clone, $empty, $store } = useNuxtApp();
var pagedata = $clone($store[props.pagename]);
if (!Array.isArray(pagedata.tablesetting)) {
  pagedata.tablesetting = Object.values(pagedata.tablesetting);
}
const errors = ref([]);
let radioNote = "no";
var tablesetting = pagedata.tablesetting;
let found = tablesetting.find((v) => v.code === "note");
if (found ? found.detail !== "@" : false) radioNote = "yes";

function changeSetting(value, code) {
  if (code === "note" && $empty(value)) return;
  let copy = $copy(tablesetting);
  let found = copy.find((v) => v.code === code);
  if (found) found.detail = value;
  else {
    found = $copy(tablesetting.find((v) => v.code === code));
    found.detail = value;
    copy.push(found);
  }
  tablesetting = copy;
  pagedata.tablesetting = tablesetting;
  $store.commit(props.pagename, pagedata);
}

const renderedHeaderBg = useTemplateRef("renderedHeaderBg");
const headerBg = ref("#000000");

onMounted(() => {
  headerBg.value = window.getComputedStyle(renderedHeaderBg.value).backgroundColor;
});
watch();

function rgbToHex(rgb) {
  const [r, g, b] = rgb.match(/\d+/g);
  return "#" + [r, g, b].map((x) => Number(x).toString(16).padStart(2, "0")).join("");
}
</script>
<style scoped>
input[type="color"] {
  width: var(--bulma-control-height);
  min-width: var(--bulma-control-height);
  max-width: var(--bulma-control-height);
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
input[type="color"]::-webkit-color-swatch {
  margin: 0 !important;
  padding: 0 !important;
  border: none;
}

.box {
  box-shadow: none;
  border: 1px solid var(--bulma-grey-90);
  background-color: var(--bulma-grey-95);
  height: 100%;
}
</style>
