<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm row items-start">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="manage_accounts" label="ユーザー管理" />
        </q-breadcrumbs>
     </div>
    <q-table title="ユーザーリスト" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading"
      :pagination="pagination" >

      <template v-slot:top>
        <q-btn v-permissions="Actions.user.add" color="primary" :disable="loading" label="新規" @click="addRow" />
        <q-space />
        <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>

      <template v-slot:body-cell-status="props">
        <q-td :props="props">
          <div class="row">
            <div v-if="props.row.isActive">
              <q-chip square color="positive" text-color="white" icon="done" label="使用可能" size="sm" />
            </div>
            <div v-else>
              <q-chip square color="negative" text-color="white" icon="block" label="使用不可" size="sm" />
            </div>
          </div>

        </q-td>
      </template>

      <template v-slot:body-cell-roles="props">
        <q-td :props="props">
          <div class="row">
            <q-chip v-if="(props.row as IUserRolesDisplay).isSuperuser" square color="accent" text-color="white" icon="admin_panel_settings"
              label="システム管理者" size="sm" />
            <q-chip v-else v-for="(item) in (props.row as IUserRolesDisplay).roles" square color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
          </div>
        </q-td>
      </template>

      <template v-slot:header-cell-status="p">
        <q-th :props="p">
          <div class="row items-center">
            <label class="q-mr-md">{{ p.col.label }}</label>
            <q-select v-model="statusFilter" :options="statusFilterOptions" borderless
              dense options-dense style="font-size: 12px; padding-top: 1px;" />
          </div>
        </q-th>
      </template>

      <template v-slot:body-cell-actions="p">
        <q-td auto-width :props="p">
          <table-action-menu :row="p.row" minWidth="180px" max-width="200px" :actions="actionList" />
        </q-td>
      </template>
    </q-table>

    <q-dialog :model-value="show" persistent>
      <q-card style="min-width: 36em">
        <q-form class="q-gutter-md" @submit="onSubmit" autocomplete="off">
          <q-card-section>
            <div class="text-h6 q-ma-sm">K-True Account</div>
          </q-card-section>

          <q-card-section class="q-pt-none q-mt-none">
            <div class="q-gutter-lg">

              <q-input filled v-model="lastName" label="氏名 *" hint="ユーザーの氏名を入力してください" lazy-rules
                :rules="[val => val && val.length > 0 || 'ユーザーの氏名を入力してください。']" />

              <q-input filled v-model="firstName" label="苗字 *" hint="ユーザーの苗字を入力してください" lazy-rules
                :rules="[val => val && val.length > 0 || 'ユーザーの苗字を入力してください']" />

              <q-input filled type="email" v-model="email" label="電子メール *" hint="電子メール、ログインとしても使用" lazy-rules
                :rules="[val => val && val.length > 0 || '電子メールを入力してください']" autocomplete="new-password" />

              <q-input v-if="isCreate" v-model="pwd" filled :type="isPwd ? 'password' : 'text'" hint="パスワード"
                label="パスワード" :disable="!isCreate" lazy-rules
                :rules="[val => val && val.length > 0 || 'パスワードを入力してください']" autocomplete="new-password">
                <template v-slot:append>
                  <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer"
                    @click="isPwd = !isPwd" />
                </template>
              </q-input>

              <q-item tag="label" v-if="authStore.isSuperAdmin" class="q-pl-sm q-pr-none q-py-xs">
                <q-item-section>
                  <q-item-label>システム管理者</q-item-label>
                </q-item-section>
                <q-item-section avatar>
                  <q-toggle v-model="isSuperuser" />
                </q-item-section>
              </q-item>

              <q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
                <q-item-section>
                  <q-item-label>使用可能</q-item-label>
                </q-item-section>
                <q-item-section avatar>
                  <q-toggle v-model="isActive" />
                </q-item-section>
              </q-item>

              <div class="q-gutter-y-md" v-if="!isCreate">
                <q-separator />

                <q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
                  <q-item-section>
                    <q-item-label>パスワードリセット</q-item-label>
                  </q-item-section>
                  <q-item-section avatar>
                    <q-toggle v-model="resetPsw" />
                  </q-item-section>
                </q-item>

                <q-input v-model="pwd" filled :type="isPwd ? 'password' : 'text'" hint="パスワードを入力してください" label="パスワード"
                  :disable="!resetPsw" lazy-rules :rules="[val => val && val.length > 0 || 'パスワードを入力してください']"
                  autocomplete="new-password">
                  <template v-slot:append>
                    <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer"
                      @click="isPwd = !isPwd" />
                  </template>
                </q-input>
                <!-- <q-btn label="asdf"/> -->
              </div>
            </div>

          </q-card-section>
          <q-card-actions align="right" class="text-primary q-mb-md q-mx-sm">
            <q-btn :loading="addEditLoading" padding="xs md" label="保存" type="submit" color="primary" />
            <q-btn label="キャンセル" type="cancel" color="primary" flat class="q-ml-sm" @click="closeDg()" />
          </q-card-actions>
        </q-form>
      </q-card>

    </q-dialog>

    <q-dialog v-model="confirm" persistent>
      <q-card>
        <q-card-section class="row items-center">
          <q-icon name="warning" color="warning" size="2em" />
          <span class="q-ml-sm">削除してもよろしいですか？</span>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
          <q-btn flat label="OK" color="primary" v-close-popup @click="deleteUser()" />
        </q-card-actions>
      </q-card>
    </q-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import TableActionMenu from 'components/TableActionMenu.vue';
import { useUserStore } from 'stores/useUserStore';
import { useAuthStore } from 'stores/useAuthStore';
import { IUserDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
import { Actions } from 'boot/permissions';

const userStore = useUserStore();
const authStore = useAuthStore();

const columns = [
  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
  { name: 'lastName', label: '氏名', field: 'lastName', align: 'left', sortable: true },
  { name: 'firstName', label: '苗字', field: 'firstName', align: 'left', sortable: true },
  { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
  { name: 'status', label: '状況', field: 'status', align: 'left' },
  { name: 'roles', label: 'ロール', field: '', align: 'left' },
  { name: 'actions', label: '', field: 'actions' }
];

const statusFilterOptions = [
  { label: '全データ',          filter: () => true },
  { label: 'システム管理者のみ', filter: (row: IUserRolesDisplay) => row.isSuperuser },
  { label: '使用可能',          filter: (row: IUserRolesDisplay) => row.isActive },
  { label: '使用不可',          filter: (row: IUserRolesDisplay) => !row.isActive },
]

const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });

const loading = ref(false);
const addEditLoading = ref(false);
const filter = ref('');
const statusFilter = ref(statusFilterOptions[0]);
const rows = computed(() => userStore.users.filter(statusFilter.value.filter));

const show = ref(false);
const confirm = ref(false);
const resetPsw = ref(false);

const firstName = ref('');
const lastName = ref('');
const email = ref('');
const isSuperuser = ref(false);
const isActive = ref(true);

const isPwd = ref(true);
const pwd = ref('');
const editId = ref(0);
const isCreate = computed(() => editId.value <= 0);

const actionList =  [
  { label: '編集', icon: 'edit_note', permission: Actions.user.edit, action: editRow },
  { separator: true },
  { label: '削除', icon: 'delete_outline', permission: Actions.user.delete, class: 'text-red', action: showDeleteUserConfirm },
];

const getUsers = async () => {
  loading.value = true;
  await userStore.loadUsers();
  loading.value = false;
}

onMounted(async () => {
  await getUsers();
})

const addRow = () => {
  onReset();
  show.value = true;
}

function showDeleteUserConfirm(row: IUserDisplay) {
  confirm.value = true;
  editId.value = row.id;
}

const deleteUser = async () => {
  await userStore.deleteUser(editId.value);
  getUsers();
  onReset();
};

function editRow(row: IUserDisplay) {
  editId.value = row.id;

  firstName.value = row.firstName;
  lastName.value = row.lastName;
  email.value = row.email;

  isSuperuser.value = row.isSuperuser;
  isActive.value = row.isActive;

  isPwd.value = true;
  show.value = true;
};

const closeDg = () => {
  show.value = false;
  onReset();
}

const onSubmit = async () => {
  addEditLoading.value = true;
  const param = {
    id:           editId.value,
    first_name:   firstName.value,
    last_name:    lastName.value,
    is_superuser: isSuperuser.value,
    is_active:    isActive.value,
    email:        email.value,
    password:     (isCreate.value || resetPsw.value) ? pwd.value : undefined
  }
  if (isCreate.value) {
    await userStore.addUser(param);
  } else {
    await userStore.editUser(param);
  }
  getUsers();
  closeDg();
  onReset();
}

const onReset = () => {
  firstName.value = '';
  lastName.value = '';
  email.value = '';
  pwd.value = '';
  isActive.value = true;
  isSuperuser.value = false;
  isPwd.value = true;
  editId.value = 0;
  resetPsw.value = false;
  addEditLoading.value = false;
}
</script>
