<template>
  <div class="dropdown-multiple-tag cursor-pointer" @click="$emit('handleShow')">
    <typo-text
      v-if="placeholder && modelValue.length == 0"
      variant="body-1-regular"
      class="placeholder"
    >
      {{ placeholder }}
    </typo-text>
    <ul>
      <li v-for="(item, index) in value" :key="index">
        <div class="item-tag">
          {{ item }}
          <base-icon
            iconName="close"
            height="16"
            width="16"
            @click.stop="handleRemove(index)"
          />
        </div>
      </li>
    </ul>
    <base-icon
      :class="{ 'arrow-up': show }"
      iconName="keyboard_arrow_down"
      color="#7D8389"
    />
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";
import TypoText from "@/components/Typography/TypoText";

export default {
  components: {
    BaseIcon,
    TypoText
  },
  props: {
    show: {
      type: [Boolean],
      default: false,
    },
    value: {
      type: [Array],
    },
    modelValue: {
      type: [Array],
    },
    placeholder: {
      type: [String],
      default: ""
    }
  },
  methods: {
    handleRemove(index) {
      let getData = [];
      this.value.forEach((element, idx) => {
        if (index != idx) {
          getData.push(element);
        }
      });
      this.$emit("click", this.value[index])
      this.$emit("update:modelValue", getData);
    },
  },
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/_color.scss" as *;

.dropdown-multiple-tag {
  padding: 4px 16px;
  background: $neutral-0;
  border: 1px solid $neutral-2;
  border-radius: 6px;
  align-self: stretch;
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: 100px;

  .placeholder {
    color: #d4d7d8;
  }

  .arrow-up {
    transform: rotate(180deg);
  }

  svg {
    cursor: pointer;
  }

  .item-tag {
    background: $neutral-2;
    border-radius: 4px;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 12px;
    color: $neutral-6;
    display: flex;
    align-items: center;
    margin: 4px 0;

    svg {
      margin-left: 4px;
    }
  }

  ul {
    list-style: none;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    width: 100%;

    li {
      margin-right: 8px;
    }
  }
}
</style>
