import {
  apiCollectionList, apiCollectionRemove, apiCollectionCreate, apiCollectionUpdate,
} from '@/api/autoshopee/shopee/keyword';
import { mapActions } from 'vuex';

import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  data() {
    return {
      loadingData: false,
      listCollection: [],
      popupCreate: false,
      formCreate: {
        id: '',
        name: '',
        description: '',
      },
    };
  },
  methods: {
    ...mapActions(['ShopeeKeywordExport']),
    onOpen(collection) {
      return this.openExternalUrl(this.createPopupUrl(`/shopee/keyword/${collection._id}`), true);
    },
    onRemove(collection) {
      const collectionId = collection._id;
      this.$Modal.confirm({
        content: this.$t('REMOVE_CONFIRM'),
        title: collection.name,
        onOk: async () => {
          this.$Message.success(this.$t('REMOVE_SUCCESS'));
          this.listCollection = this.listCollection.filter((item) => item._id !== collectionId);

          apiCollectionRemove(collectionId);
        },
      });
    },
    async onExport(row, index) {
      this.listCollection[index].loading = true;

      await this.ShopeeKeywordExport({
        id: row._id,
        name: row.name,
      });

      this.listCollection[index].loading = false;
    },
    onCreate() {
      this.formCreate.id = '';
      this.formCreate.name = '';
      this.formCreate.description = '';

      this.popupCreate = true;
    },
    onEdit(item) {
      this.formCreate.id = item._id;
      this.formCreate.name = item.name;
      this.formCreate.description = item.description;

      this.popupCreate = true;
    },
    handlerPopup() {
      if (this.formCreate.id) {
        return this.updateCollection();
      }

      this.createCollection();
    },
    async getList() {
      this.loadingData = true;

      this.listCollection = (await apiCollectionList()).data.map((item) => {
        return {
          ...item,
          loading: false,
        };
      });

      this.loadingData = false;
    },
    async updateCollection() {
      const { success } = await apiCollectionUpdate(this.formCreate.id, {
        name: this.formCreate.name,
        description: this.formCreate.description,
      });

      if (!success) {
        return this.$Message.error(this.$t('UPDATE_ERROR'));
      }
      const collectionData = this.listCollection.find((item) => item._id === this.formCreate.id);

      collectionData.name = this.formCreate.name;
      collectionData.description = this.formCreate.description;

      this.$Message.success(this.$t('UPDATE_SUCCESS'));
    },
    async createCollection() {
      const { data, success } = await apiCollectionCreate({
        name: this.formCreate.name,
        description: this.formCreate.description,
      });

      if (!success) {
        return this.$Message.error(this.$t('CREATE_ERROR'));
      }

      data.loading = false;
      this.listCollection.push(data);
      this.$Message.success(this.$t('CREATE_SUCCESS'));
    },
  },
  created() {
    this.getList();
  },
  computed: {
    listCollectionShow() {
      return this.listCollection.map((item) => {
        return {
          ...item,
          title: this.$t('KEYWORD_COLLECTION_GET_TITLE', {
            name: item.name,
            count: item.count,
            time: this.$d(new Date(item.timeCreate), 'long'),
          }),
        };
      });
    },
  },
});
