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

import NoData from 'src/components/NoData.vue';
import WorkManagementComponent from './WorkManagementComponent.vue';

const { t } = useI18n();

import { WorkItems, ProductList } from 'src/stores/product-service/types';

const serviceName = defineModel<string>('serviceName');
const product = defineModel<ProductList[]>();

const workItems = defineModel<WorkItems[]>('workItems', { default: [] });

// const workItems = ref([
//   {
//     id: '1',
//     product: [
//       {
//         id: '1',
//         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี 555',
//         labelEn: '2 year work permit fee',
//         code: 'AC101',
//         price: 1200,
//         time: '14',
//       },
//     ],
//   },
//   {
//     id: '2',
//     product: [
//       {
//         id: '1',
//         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
//         labelEn: '2 year work permit fee',
//         code: 'AC101',
//         price: 1200,
//         time: '14',
//       },
//       {
//         id: '1',
//         label:
//           'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
//         labelEn:
//           'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
//         code: 'AC102',
//         price: 1200,
//         time: '14',
//       },
//     ],
//   },
// ]);

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();

defineEmits<{
  (e: 'addProduct', index: number): void;
  (e: 'manageWorkName'): void;
  (e: 'workProperties', index: number): void;
}>();

function addWork() {
  workItems.value.push({
    id: '',
    name: '',
    attributes: { additional: [] },
    product: [],
  });
}

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="column col-12 full-height">
    <div class="col-1 app-text-muted row items-start">
      • {{ $t(`workInformation`) }}
      <q-btn
        icon="mdi-plus"
        dense
        flat
        round
        padding="0"
        color="primary"
        class="q-ml-sm"
        @click="addWork"
      />
    </div>

    <div v-if="workItems.length > 0" class="col q-gutter-y-md">
      <WorkManagementComponent
        v-for="(work, index) in workItems"
        :key="work.id"
        :index="index"
        :length="workItems.length"
        :workIndex="index"
        v-model:work-name="workItems[index].name"
        v-model:product-items="work.product"
        @add-product="$emit('addProduct', index)"
        @move-work-up="moveItemUp(workItems, index)"
        @move-work-down="moveItemDown(workItems, index)"
        @delete-work="confirmDelete(workItems, index)"
        @move-product-up="moveItemUp"
        @move-product-down="moveItemDown"
        @delete-product="confirmDelete"
        @manage-work-name="$emit('manageWorkName')"
        @work-properties="$emit('workProperties', index)"
      ></WorkManagementComponent>
    </div>

    <div
      v-else
      class="col row rounded bordered surface-2 justify-center items-center"
    >
      <NoData />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
