<i18n>
{
  "en": {
    "statements": {
      "CommentDialog": {
        "dialogTitle": "Adding a comment to the status",
        "errorComment": "Comment cannot exceed 2048 characters",
        "addComment": "Add",
        "cancelComment": "Cancel"
      }
    }
  },
  "ru": {
    "statements": {
      "CommentDialog": {
        "dialogTitle": "Добавление комментария к статусу ЕПГУ",
        "errorComment": "Комментарий не может содержать больше 2048 символов",
        "addComment": "Добавить",
        "cancelComment": "Отменить"
      }
    }
  }
}
</i18n>

<template>
  <div>
    <q-btn
      class="q-ml-sm"
      padding="6px"
      flat
      :icon="get(buttonSettings, 'props.icon')"
      :label="get(buttonSettings, 'props.label')"
      :color="get(buttonSettings, 'props.color')"
      :disable="disableAllButtons"
      @click="doAction"
    >
      <q-badge
        v-if="comment"
        style="
          border-radius: 50%;
          width: 18px;
          height: 18px;
          top: -4px;
          right: -4px;
        "
        color="negative"
        floating
      >
        <q-icon
          name="check"
          color="white"
          style="font-size: 14px; position: relative; left: -4px"
        />
      </q-badge>
      <slot />
    </q-btn>
    <!-- TODO: Доделать дефолтную кнопку с настраеваемым id(props) и label'ом  -->
    <q-dialog v-model="value">
      <q-card class="no-shadow" style="max-width: 80vw; width: 700px">
        <q-card-section class="text-h6">{{
          $t('statements.CommentDialog.dialogTitle')
        }}</q-card-section>
        <q-card-section class="q-gutter-y-md">
          <q-input 
            v-model="comment"
            filled
            type="textarea"
            :rules="[ val => val.length <= 2048 || $t('statements.CommentDialog.errorComment')]"
          />
        </q-card-section>
        <q-card-section class="full-width flex justify-end">
          <q-btn
            v-for="button in buttons"
            :key="button.id"
            class="q-ml-sm"
            :disable="(!comment || comment.length > 2048) && button.id === 'add'"
            :label="button.props.label"
            :color="button.props.color"
            :outline="button.props.outlined"
            :loading="button.props.loading"
            @click="button.handler"
          />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import get from 'lodash/get';

export default {
  props: [
    'row',
    'common',
    'model',
    'disable-all-buttons',
    'user-task',
    'button-settings',
  ],

  data() {
    return {
      buttons: [
        {
          id: 'cancel',
          props: {
            color: 'negative',
            label: this.$t('statements.CommentDialog.cancelComment'),
            loading: false,
            outlined: true,
          },
          handler: () => {
            this.$recordActivity({
              buttonCode: 'application_add_cancel',
              extraInfo: {
                previewInfo: [
                  {
                    value: this.model?.common?.orderId,
                    label: 'номер',
                  },
                ],
              },
            });
            this.comment = '';
            this.$emit('update', {
              comment: this.comment,
            });
            this.value = false;
          },
        },
        {
          id: 'add',
          props: {
            color: 'primary',
            label: this.$t('statements.CommentDialog.addComment'),
            loading: false,
            outlined: false,
          },
          handler: () => {
            this.$recordActivity({
              buttonCode: 'application_add',
              extraInfo: {
                previewInfo: [
                  {
                    value: this.model?.common?.orderId,
                    label: 'номер',
                  },
                ],
              },
            });
            this.$emit('update', {
              comment: this.comment,
            });
            this.value = false;
          },
        },
      ],
      comment: '',
      value: false,
    };
  },

  created() {
    this.checkUserComments(this.userTask);
  },

  methods: {
    get,
    doAction() {
      this.$recordActivity({
        buttonCode: 'application_add_prepare',
        extraInfo: {
          previewInfo: [
            {
              value: this.model?.common?.orderId,
              label: 'номер',
            },
          ],
        },
      });
      this.value = true;
    },
    checkUserComments(userTask) {
      if (get(userTask, 'userTask.outData.comment')) {
        this.comment = get(userTask, 'userTask.outData.comment');
      } else {
        this.comment = '';
      }
      this.$emit('update', {
        comment: this.comment,
      });
    },
  },
};
</script>
