<script>
  /* global BoardService */

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

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

  export default {
    components: {
      loadingIcon,
    },
    props: {
      board: {
        type: Object,
        required: true,
      },
      milestonePath: {
        type: String,
        required: true,
      },
      canEdit: {
        type: Boolean,
        required: false,
        default: false,
      },
    },

    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 : '';
      },
    },
    mounted() {
      this.milestoneDropdown = new MilestoneSelect(null, this.$refs.dropdownButton, {
        handleClick: this.selectMilestone,
      });
    },
    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,
        };
      },
    },
  };
</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"
          >
          </i>
        </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>
            <i
              role="button"
              aria-hidden="true"
              data-hidden="true"
              class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
            >
            </i>
          </div>
          <div class="dropdown-content">
          </div>
          <div class="dropdown-loading">
            <loading-icon />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>