<template>
  <div 
    :class="{ 
      search: search, 
      'disabled-dropdown': disabled,
      'readonly-dropdown': readonly
    }"
  >
    <div class="dropdown w-full">
      <slot name="head" />
      <div class="dropdown-content" :class="{ show: show }">
        <slot name="list" />
        <slot name="additional" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: [Boolean],
      default: false,
    },
    search: {
      type: [Boolean],
      default: false,
    },
    disabled: {
      type: [Boolean],
      default: false,
    },
    readonly: {
      type: [Boolean],
      default: false,
    }
  },
  mounted() {
    window.addEventListener('click', (e) => {
      if (this.show){
        if (!this.$el.contains(e.target)){
          this.handleClose()
        }
      }
    })
  },
  methods: {
    handleClose() {
      this.$emit("handleClose");
    },
  },
};
</script>

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

.dropdown {
  position: relative;
  display: inline-block;
  width: auto;

  button,
  a {
    position: relative;
    z-index: 2;
  }

  .dropdown-content {
    position: absolute;
    min-width: 105px;
    overflow: auto;
    z-index: 2;
    border-radius: 6px;
    background: $neutral-0;
    box-shadow: 0px 1px 6px rgb(11 60 93 / 12%),
      0px 4px 18px 3px rgb(46 50 52 / 8%);
    border: 1px solid $neutral-0;
    padding: 4px 0;
    font-size: 14px;
    transition: all 0.3s;
    display: none;

    .base-checkbox-group {
      padding: 14px 38px 14px 19px;
      min-width: max-content;

      .label {
        margin-right: 11px;
      }
    }

    .base-checkbox-group:hover {
      background: $neutral-1;
    }

    a {
      color: $neutral-6;
      padding: 8px 12px;
      text-decoration: none;
      display: block;
    }

    button {
      color: $neutral-6;
      font-size: 14px;
      padding: 8px 12px;
      width: 100%;
      min-width: max-content;
      border: none;
      background: none;
      text-align: left;
      cursor: pointer;
    }

    a:hover,
    button:hover {
      background-color: $neutral-1;
    }

    .danger {
      color: $critical-4;
    }
  }

  .show {
    display: block;
  }
}

.search {
  .dropdown {
    display: flex;
    justify-content: center;

    .select-box__list {
      position: relative;
    }

    .form-input {
      z-index: 3;
    }

    .dropdown-content {
      width: calc(100% + 32px);
      margin-top: -12px;
      padding-top: 60px;
    }
  }
}

.readonly-dropdown {
  .dropdown {
    .form-input {
      pointer-events: none;
    }

    .dropdown-multiple-tag {
      svg {
        pointer-events: none;
      }
    }
  }
}

.disabled-dropdown {
  .dropdown {
    .form-input {
      pointer-events: none;

      input {
        background: #f5f6f7;
        border-color: #d4d7d8;
      }
    }
    
    .base-btn {
      background: #ffffff;
      color: #c5d8ec;
      pointer-events: none;
    }

    .dropdown-multiple-tag {
      background: #f5f6f7;

      svg {
        pointer-events: none;
      }
    }
  }
}
</style>
