<template>
  <div :class="{ 'is-child': isChild }" class="title-col-container">
    <div v-if="children.length" class="more-btn" @click="onTrigger">
      <Icon
        :icon="isDeploy ? 'arrow-down' : 'arrow-right'"
        :color="$_theme('colorLight')"
        size="xxs"
      />
    </div>

    <BaseText :class="{ 'contain-child': children.length }">
      {{ title }}
    </BaseText>
  </div>
</template>

<script>
import { BaseText, Icon } from 'inside-collection/atoms'
import refreshListing from '@inside-listings/mixins/refresh-listing-mixin'

export default {
  name: 'TitleCol',
  components: {
    BaseText,
    Icon
  },
  mixins: [refreshListing],
  props: {
    listingId: {
      type: String
    },
    title: {
      type: String
    },
    uuid: {
      type: String
    },
    rops: {
      type: Array,
      default: () => []
    },
    declinedDocuments: {
      type: Array,
      default: () => []
    },
    isChild: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isDeploy: false
    }
  },
  computed: {
    children() {
      if (this.rops.length) return this.rops

      if (this.declinedDocuments.length) return this.declinedDocuments

      return []
    }
  },
  methods: {
    onTrigger() {
      const parentIndex = this.$store.getters.getItemIndexById({
        id: this.listingId,
        itemUuid: this.uuid
      })

      this.children.forEach((child, index) => {
        if (this.isDeploy) {
          this.$_deleteItem({
            listingId: this.listingId,
            item: child,
            needRefresh: false
          })
        } else {
          this.$_addItem({
            listingId: this.listingId,
            item: { ...child, isChild: true },
            atIndex: parentIndex + 1 + index
          })
        }
      })

      this.isDeploy = !this.isDeploy
    }
  }
}
</script>

<style lang="scss">
.title-col-container {
  display: flex;
  align-items: center;

  &.is-child {
    padding-left: var(--spacing-xl);
  }

  .more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-l);
    height: var(--spacing-l);
    margin-right: var(--spacing-s);
    border-radius: 100%;
    background: var(--color-dashboard);
    cursor: pointer;
  }

  .contain-child {
    font-weight: var(--font-weight-bold);
  }
}
</style>
