<script>
/* global BoardService, MilestoneSelect */

import '~/milestone_select';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';

const ANY_MILESTONE = 'Any Milestone';
const NO_MILESTONE = 'No Milestone';

export default {
  props: {
    board: {
      type: Object,
      required: true,
    },
    milestonePath: {
      type: String,
      required: true,
    },
    canEdit: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  components: {
    loadingIcon,
  },
  computed: {
    milestoneTitle() {
      if (this.noMilestone) return NO_MILESTONE;
      return this.board.milestone ? this.board.milestone.title : ANY_MILESTONE;
    },
    noMilestone() {
      return this.milestoneId === 0;
    },
    milestoneId() {
      return this.board.milestone_id;
    },
    milestoneTitleClass() {
      return this.milestoneTitle === ANY_MILESTONE ? 'text-secondary' : 'bold';
    },
    selected() {
      if (this.noMilestone) return NO_MILESTONE;
      return this.board.milestone ? this.board.milestone.name : '';
    },
  },
  methods: {
    selectMilestone(milestone) {
      let id = milestone.id;
      // swap the IDs of 'Any' and 'No' milestone to what backend requires
      if (milestone.title === ANY_MILESTONE) {
        id = -1;
      } else if (milestone.title === NO_MILESTONE) {
        id = 0;
      }
      this.board.milestone_id = id;
      this.board.milestone = {
        ...milestone,
        id,
      };
    },
  },
  mounted() {
    this.milestoneDropdown = new MilestoneSelect(null, this.$refs.dropdownButton, {
      handleClick: this.selectMilestone,
    });
  },
};
</script>

<template>
  <div class="block milestone">
    <div class="title append-bottom-10">
      Milestone
      <button
        v-if="canEdit"
        type="button"
        class="edit-link btn btn-blank pull-right"
      >
        Edit
      </button>
    </div>
    <div
      class="value"
      :class="milestoneTitleClass"
    >
      {{ milestoneTitle }}
    </div>
    <div
      class="selectbox"
      style="display: none;"
    >
      <input
        :value="milestoneId"
        name="milestone_id"
        type="hidden"
      >
      <div class="dropdown">
        <button
          ref="dropdownButton"
          :data-selected="selected"
          class="dropdown-menu-toggle wide"
          :data-milestones="milestonePath"
          :data-show-no="true"
          :data-show-any="true"
          :data-show-started="true"
          :data-show-upcoming="true"
          data-toggle="dropdown"
          :data-use-id="true"
          type="button"
        >
          Milestone
          <i
            aria-hidden="true"
            data-hidden="true"
            class="fa fa-chevron-down"
          />
        </button>
        <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
          <div
            class="dropdown-input"
          >
            <input
              type="search"
              class="dropdown-input-field"
              placeholder="Search milestones"
              autocomplete="off"
            >
            <i
              aria-hidden="true"
              data-hidden="true"
              class="fa fa-search dropdown-input-search"
            />
            <i
              role="button"
              aria-hidden="true"
              data-hidden="true"
              class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
            />
          </div>
          <div class="dropdown-content" />
          <div class="dropdown-loading">
            <loading-icon />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
