<script setup>
import { isEqual } from "es-toolkit";

const store = useStore();
const { $copy, $snackbar } = useNuxtApp();

const localMenu = ref($copy(store.menu));

function save() {
  store.menu = $copy(localMenu.value);
  localMenu.value = $copy(store.menu);
  $snackbar("Đã cập nhật phân quyền");
}
</script>

<template>
  <div style="max-width: 800px; margin-inline: auto">
    <table class="table is-fullwidth is-hoverable is-bordered fs-14 mb-4">
      <thead>
        <tr style="background-color: #e4fff0">
          <th>
            <SvgIcon v-bind="{ name: 'visibility.svg', size: 20 }" />
          </th>
          <th>Menu</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="m in localMenu"
          :key="m.id"
          @click="m.view = !m.view"
          class="is-clickable"
        >
          <td>
            <label class="checkbox">
              <input
                type="checkbox"
                :disabled="localMenu.filter((menu) => menu.view).length === 1 && m.view"
                v-model="m.view"
              />
            </label>
          </td>
          <td>
            <div class="is-flex is-justify-content-space-between is-align-items-center">
              <p>{{ m.vi }}</p>
              <p class="fs-13 has-text-grey">{{ m.code }}</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="block">
      <button
        :disabled="isEqual(store.menu, localMenu)"
        @click="save"
        class="button is-primary"
      >
        <span class="icon">
          <SvgIcon v-bind="{ name: 'save.svg', type: 'white', size: 19 }" />
        </span>
        <span>Lưu thay đổi</span>
      </button>
    </div>
  </div>
</template>
