<template>
  <div class="mb-10">
    <span>
      <Poptip
        placement="top"
        width="600"
      >
        <Button
          type="success"
          size="small"
        >
          {{ $t('AI_CONTENT_DESCRIPTION_GENERATOR') }}
        </Button>
        <div slot="content">
          <div>
            <Input
              v-model="inputContent"
              :placeholder="$t('AI_CONTENT_INPUT')"
              type="textarea"
              :rows="5"
            />
          </div>
          <div class="mt-5">
            <small
              v-if="contentLog"
              class="mr-5 text-muted"
            >
              {{ contentLog }}
            </small>
            <small
              v-else-if="errorText"
              class="mr-5 text-danger"
            >
              {{ errorText }}
            </small>

            <Button
              style="float: right"
              type="primary"
              :disabled="!inputContent || btnLoading || btnDisabled"
              size="small"
              @click="generatorContent"
            >
              <i
                v-if="btnLoading"
                class="fa fa-spinner fa-spin"
                aria-hidden="true"
              />

              {{ btnText }}
            </Button>
          </div>
        </div>
      </Poptip>
    </span>
    <span style="float: right">
      <span class="mr-2">{{ processLog }}</span>
      <Button
        :disabled="!showPreviewPreviousBtn"
        type="info"
        class="mr-5"
        size="small"
        @click="previewPreviousContent"
      >
        {{ $t('AI_CONTENT_PREVIEW_PREVIOUS') }}
      </Button>

      <Button
        :disabled="!showPreviewNextBtn"
        type="primary"
        size="small"
        @click="previewNextContent"
      >
        {{ $t('AI_CONTENT_PREVIEW_NEXT') }}
      </Button>
    </span>
  </div>
</template>

<script>
import {
  getProductDescription,
  getListImageDescription,
  setProductDescription,
  getProductName,
} from './utils';
import { gptWriteContent } from '@/api/gpt';
import { bridgeGetUserInfo } from '@/bridge/content/background';
import { loggerContent } from '@/plugins/logger';

export default {
  name: 'GptContent',
  data() {
    return {
      listContent: [getProductDescription()],
      listImageUrl: getListImageDescription(),
      indexContent: 0,
      contentLog: '',
      inputContent: getProductDescription() || getProductName(),
      btnLoading: false,
      btnDisabled: false,
      btnText: this.$t('AI_CONTENT_DESCRIPTION_GENERATOR'),
      errorText: '',
    };
  },
  methods: {
    async generatorContent() {
      const userInfo = await bridgeGetUserInfo();

      if (!userInfo.isPaidPlan) {
        this.btnDisabled = true;
        this.errorText = this.$t('FEAUTRE_REQUIRE_VIP_PAID');
        return false;
      }

      this.btnLoading = true;

      this.contentLog = `${this.$t('AI_CONTENT_LOADING')}...`;

      try {
        let generateContent = await gptWriteContent(this.inputContent);

        if (this.listImageUrl.length) {
          generateContent = [
            generateContent,
            ...this.listImageUrl.map(
              (url) => `<img src="${url}" data-uploading="uploaded" data-upload-status="success" >`,
            ),
          ].join('<br/>');
        }
        setProductDescription(generateContent);

        this.listContent.push(generateContent);

        this.indexContent = this.listContent.length - 1;
        this.contentLog = this.$t('AI_CONTENT_SUCCESS');
      } catch (error) {
        loggerContent.error({
          msg: 'GPT_AI_CONTENT_ERROR',
          error,
        });
        this.contentLog = this.$t('AI_CONTENT_ERROR');
      }

      this.btnLoading = false;
    },
    previewPreviousContent() {
      this.indexContent--;
      setProductDescription(this.listContent[this.indexContent]);
    },
    previewNextContent() {
      this.indexContent++;
      setProductDescription(this.listContent[this.indexContent]);
    },
  },
  computed: {
    processLog() {
      if (this.listContent.length > 1) {
        return `(${this.indexContent + 1}/${this.listContent.length})`;
      }

      return '';
    },
    showPreviewPreviousBtn() {
      return this.indexContent > 0;
    },
    showPreviewNextBtn() {
      return this.indexContent < this.listContent.length - 1;
    },
  },
};
</script>
