<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="getDetail('table-font-size')"
              @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="getDetail('header-font-size')"
              @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="getDetail('per-page')"
              @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="getDetail('table-background')"
              @change="changeSetting($event.target.value, 'table-background')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="getDetail('table-background')"
              @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="getDetail('table-font-color')"
              @change="changeSetting($event.target.value, 'table-font-color')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="getDetail('table-font-color')"
              @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="getDetail('header-font-color')"
              @change="changeSetting($event.target.value, 'header-font-color')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="getDetail('header-font-color')"
              @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="getDetail('header-background')"
              @change="changeSetting($event.target.value, 'header-background')"
            />

            <div
              ref="renderedHeaderBg"
              class="is-hidden"
              :style="{
                backgroundColor: getDetail('header-background'),
              }"
            ></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="getDetail('header-filter-color')"
              @change="changeSetting($event.target.value, 'header-filter-color')"
            />
            <input
              class="input fs-13"
              type="text"
              placeholder="#f29384, var(--bulma-blue)"
              :value="getDetail('header-filter-color')"
              @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="getDetail('td-border')"
              @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>
import { cloneDeep } from "es-toolkit";

const props = defineProps({
  pagename: String,
});
const emit = defineEmits(["close"]);
const { $copy, $empty, $store } = useNuxtApp();
let pagedata = cloneDeep($store[props.pagename]);
if (!pagedata.tablesetting) {
  pagedata.tablesetting = [];
}
if (!Array.isArray(pagedata.tablesetting)) {
  pagedata.tablesetting = Object.values(pagedata.tablesetting);
}

const getDetail = (code) => tablesetting.find((v) => v.code === code)?.detail || "";
const errors = ref([]);
let radioNote = "no";
let tablesetting = pagedata.tablesetting;
let found = getDetail("note");
if (found !== "@") 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-100);
  height: 100%;
}
</style>
