<template>
  <Dropdown class="lofty-more-box" :right="0" :menuStyle="{paddingRight: 0}" :clickMenuClose="false" :fit-width="false">
    <span class="lofty-show-more-name">More
      <span v-if="filterCount">({{filterCount}})</span>
    </span>
    <template #menu>
      <div class="lofty-more-panel">
        <div class="lofty-more-filter-title">
          <div class="lofty-more-filter-count">{{ filterCount}} Filters Applied</div>
          <div class="lofty-clear-filter" @click="clearParams"><i class="lofty_iconfont lofty-icon-reset"></i> Clear</div>
        </div>
        <div class="lofty-condition-group" v-for="group in moreConfigs" :key="group.name">
          <p class="lofty-group-name">{{group.nameText}}</p>
          <div class="lofty-group-wrapper">
            <div v-for="item in group.conditions" :key="item.name" class="lofty-condition-label-input"
               :style="{width: item.inputType==='keyWord'?'100%':''}">
              <p class="lofty-condition-label"><span>{{ item.label }}</span></p>
              <component v-model="condition[item.name]"
                         :key="item.name"
                         :is="components[item.inputType]"
                         :uiConfig="uiConfig"
                         :config="item"></component>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Dropdown>
</template>

<script setup>
import Dropdown from "@/components/dropdown/index.vue";
import components from "./index.js"
import { isValidValue } from "@/components/search-bar/util.js";
const props = defineProps({
  moreConfigs: {
    type: Array,
    required: true,
  },
  condition: Object,
  uiConfig: Object
});

const moreConfigsKeys = computed(()=>{
  const set = new Set()
  props.moreConfigs.forEach(group => {
    group.conditions.forEach(item => {
      set.add(item.name)
    })
  })
  return set
})

const filterCount = computed(()=>{
  let count = 0
  for(let key in props.condition) {
    const val = props.condition[key]
    if(isValidValue(val) && moreConfigsKeys.value.has(key)) {
      count++
      if(typeof val === 'string') {  // if '1,2'; so count++ again
        const parts = val.split(',');
        if(parts.length === 2 && parts.every(str => !!str)) {
          count++
        }
      }
    }
  }
  return count
})
function clearParams() {
  for(const key of moreConfigsKeys.value) {
    const val = props.condition[key]
      if(Array.isArray(val)) {
        props.condition[key] = []
      } else if(typeof val === 'object') {
        props.condition[key] = {}
      } else if(typeof val === 'boolean') {
        props.condition[key] = false
      } else if(typeof val === 'string') {
        props.condition[key] = ''
      }
  }
}
</script>
<style lang="scss">
.lofty-more-box {
  border: 1px solid #dddddd;
  padding: 12px 15px;
  cursor: pointer;
  &:hover {
    border-color: #111;
  }
  .lofty-show-more-name {
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    color: #111111;
    margin-right: 10px;
    cursor: pointer;
  }
  .lofty-more-panel {
    width: 830px;
    max-height: 549px;
    overflow-y: auto;
    padding: 20px;
    .lofty-more-filter-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .lofty-clear-filter {
        cursor: pointer;
        font-size: 16px;
        margin-left: auto;
      }
    }
  }
}
.lofty-condition-group {
  margin-top: 20px;
  .lofty-group-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 44px;
  }
  .lofty-group-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .lofty-condition-label-input {
       flex:none;
       width: calc((100% - 10px) / 2);
       position: relative;
      .lofty-condition-label {
        font-size: 14px;
        font-weight: 600;
        line-height: 44px;
        color: #555;
      }
      .lofty-text {
        width: calc(100% - 10px);
      }
    }
    @include media-600 {
      .lofty-condition-label-input{
        width: 100%;
        position: relative;
        .lofty-checkbox-compo {
          position: absolute;
          right: 10px;
          top: 10px;
        }
      }
    }
  }
}
</style>