<template>
  <div class="row x-small-space-xs middle-xs bottom-margin-x-small">
    <div class="col-xs-width-auto">
      <div class="padding-small margin-x-small">
        <base-checkbox
          :name="`status_${customLinksId}`"
          :value-checked="status"
          value="1"
          unchecked-value="0"
          :disabled="disabled"
          @change="value => onChangeField({ customLinksId, field: 'status', value })"
        />
      </div>
    </div>
    <div class="col-xs-width-auto">
      <div class="btn-group" v-if="icon">
        <base-button
          apperance="outline"
          square
          :disabled="disabled || status == 0"
          @click.native="onChangeField({ customLinksId, field: 'icon' })"
        >
          <template #icon>
            <img v-if="icon.indexOf('http') !== -1" :src="icon" />
            <i v-else :class="icon"></i>
          </template>
        </base-button>
        <base-button
          apperance="outline"
          square
          :disabled="disabled || status == 0"
          @click.native="onChangeField({ customLinksId, field: 'icon', value: '' })"
        >
          <template #icon>
            <i class="fas fa-times"></i>
          </template>
        </base-button>
      </div>
      <base-button
        v-else
        apperance="outline"
        :disabled="disabled || status == 0"
        @click.native="onChangeField({ customLinksId, field: 'icon' })"
      >
        Icone
      </base-button>
    </div>

    <validation-provider
      tag="div"
      class="col-xs"
      rules="required"
      :name="`text_${customLinksId}`"
      v-slot="{ errors, valid }"
    >
      <base-input
        type="text"
        ref="textInput"
        :name="`text_${customLinksId}`"
        :value="text"
        :error="errors[0]"
        :valid="valid"
        :disabled="disabled || status == 0"
        placeholder=""
        @input="value => onChangeField({ customLinksId, field: 'text', value })"
      />
    </validation-provider>

    <validation-provider
      tag="div"
      class="col-xs"
      rules="required"
      :name="`link_${customLinksId}`"
      v-slot="{ errors, valid }"
    >
      <base-input
        type="text"
        :name="`link_${customLinksId}`"
        :value="link"
        :error="errors[0]"
        :valid="valid"
        :disabled="disabled || status == 0"
        placeholder=""
        @input="value => onChangeField({ customLinksId, field: 'link', value })"
      />
    </validation-provider>

    <div class="col-xs-width-auto">
      <base-button 
        apperance="white" 
        square 
        :disabled="isSaveButtonDisabled"
        @click.native="onSaveLink(customLinksId)"
        title="Salvar Link/Sublink"
      >
        <template #icon>
          <i class="fas fa-check"></i> 
        </template>
      </base-button>
    </div>

    <div class="col-xs-width-auto">
      <base-button 
        apperance="white" 
        square :disabled="disabled" 
        @click.native="onRemoveLink(customLinksId)" 
        title="Excluir Link/Sublink"
      >
        <template #icon>
          <i class="fas fa-trash"></i>
        </template>
      </base-button>
    </div>

    <div class="col-xs-width-auto">
      <div class="padding-small margin-x-small">
        <i class="fas fa-bars visible-block cursor-grab text-small text-gray"></i>
      </div>
    </div>
  </div>
</template>

<script>
import formMixin from '@mixins/formMixin';
import { validate } from 'uuid';

export default {
  name: 'CustomLinksItem',
  inject: ['onRemoveLink', 'onChangeField', 'onSaveLink', 'unsavedItemsCount'],
  mixins: [formMixin],
  props: {
    customLinksId: {
      type: String,
      required: true,
    },
    shouldFocus: {
      type: Boolean,
      default: false,
    },
    status: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      required: true,
    },
    text: {
      type: String,
      required: true,
    },
    link: {
      type: String,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isUnsaved() {
      return validate(this.customLinksId);
    },
    shouldDisableSingleSave() {
      const unsavedCount = this.unsavedItemsCount();
      if (!this.isUnsaved) {
          return unsavedCount > 0;
      }
      return unsavedCount > 1;
    },
    isSaveButtonDisabled() {
        return (
            this.disabled || 
            this.status == 0 || 
            this.text === '' || 
            this.link === '' || 
            this.shouldDisableSingleSave
        );
    }
  },
};
</script>
