<script lang="ts" setup>
import { ref } from 'vue';
import { deleteItem, dialog } from 'src/stores/utils';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const inputWorkName = ref<HTMLInputElement[]>([]);
const newNameIndex = ref();

const testName = ref([
  { name: 'ทดสอบการขาย 1', isEdit: false },
  { name: 'ทดสอบการขาย 2', isEdit: false },
  { name: 'ทดสอบการขาย 3', isEdit: false },
  { name: 'ทดสอบการขาย 4', isEdit: false },
  { name: 'ทดสอบการขาย 5', isEdit: false },
]);

function addWorkName() {
  testName.value.push({
    name: '',
    isEdit: true,
  });
  setTimeout(() => {
    inputWorkName.value[testName.value.length - 1].focus();
  }, 100);
}

function confirmDelete(items: unknown[], index: number) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('delete'),
    message: t('deleteConfirmMessage'),
    action: async () => {
      deleteItem(items, index);
    },
    cancel: () => {},
  });
}
</script>
<template>
  <div class="full-width column no-wrap full-height">
    <div
      v-if="true"
      class="bordered rounded surface-1 flex col column justify-between"
    >
      <q-list class="full-width col scroll">
        <q-item
          class="items-center row q-px-lg"
          v-for="(i, index) in testName"
          :key="index"
        >
          <!-- outlined -->
          <q-input
            ref="inputWorkName"
            dense
            :borderless="!i.isEdit"
            :readonly="!i.isEdit"
            :outlined="i.isEdit"
            class="col q-mr-md"
            v-model="i.name"
            placeholder="ชื่องาน"
          ></q-input>
          <q-btn
            v-if="!i.isEdit"
            id="btn-edit-work-name"
            icon="mdi-pencil-outline"
            dense
            flat
            round
            color="primary"
            @click="i.isEdit = true"
          >
            <q-tooltip>Edit</q-tooltip>
          </q-btn>
          <q-btn
            v-else
            id="btn-edit-work-name"
            icon="mdi-check"
            dense
            flat
            round
            color="primary"
            @click="i.isEdit = false"
          >
            <q-tooltip>Save</q-tooltip>
          </q-btn>
          <q-btn
            v-if="!i.isEdit"
            id="btn-delete-work-name"
            icon="mdi-trash-can-outline"
            dense
            flat
            round
            class="q-ml-md"
            color="negative"
            @click="confirmDelete(testName, index)"
          >
            <q-tooltip>Delete</q-tooltip>
          </q-btn>
          <q-btn
            v-else
            id="btn-edit-work-name"
            icon="mdi-undo"
            dense
            flat
            round
            class="q-ml-md"
            color="negative"
            @click="i.isEdit = false"
          >
            <q-tooltip>Cancel</q-tooltip>
          </q-btn>
        </q-item>
      </q-list>

      <div class="bordered-t full-width">
        <q-item clickable @click="addWorkName">
          <span class="q-px-lg flex items-center app-text-muted-2">
            <q-icon name="mdi-plus" class="q-mr-md" />
            เพิ่มงานใหม่
          </span>
        </q-item>
      </div>
    </div>
    <div
      v-else
      class="bordered rounded surface-1 flex justify-center items-center col"
    >
      <NoData />
    </div>
  </div>
</template>
