<template>
  <div class="searchPanel">
    <div class="filter-header">
      <img class="icon"
           @click = "hideFilter"
           alt="filter header"
           src="data:image/svg+xml,%3csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M10.5 19L1.5 10L10.5 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
    </div>
    <div class="root">
      <div class="header">
        <span class="label">FILTERS</span>
        <button class="button" @click="onClickClearAll">CLEAR ALL</button>
      </div>
      <div class="content">
        <div class="one-block" v-for="data in currentFilterData" :key="data.title">
          <check-list v-if="data.type === 'check'" :title="data.title" :items="data.datas"></check-list>
          <slider-section v-else-if="data.type === 'slider'" :title="data.title" :value-min="data.valueMin" :value-max="data.valueMax" :cfg="data.cfg"></slider-section>
          <range-input v-else-if="data.type==='range'" :title="data.title" :value-min="data.valueMin" :value-max="data.valueMax"></range-input>
        </div>
      </div>
    </div>
    <div class="filter-btn">
      <button class="general-btn btnApply"><span>Apply Filter</span></button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import FilterItem from '@/components/market/filters/FilterItem.vue'
import SelectSection from '@/components/market/filters/SelectSection.vue'
import RangeSlider, { ISliderCfg } from '@/components/market/filters/RangeSlider.vue'
import CheckList, { ICheckData } from '@/components/market/filters/CheckList.vue'
import SliderSection from '@/components/market/filters/SliderSection.vue'
import RangeInput from '@/components/market/filters/RangeSection.vue'

export interface IFilterCfg {
  title: string
  type: string
  datas?: ICheckData[]
  cfg?: ISliderCfg
  valueMin?: number
  valueMax?: number
}
@Component({
  name: 'SearchPanel',
  components: {
    RangeInput,
    SliderSection,
    CheckList,
    RangeSlider,
    SelectSection,
    FilterItem

  }
})
export default class extends Vue {
  @Prop() private nftType: number

  private heroFilterData: IFilterCfg[] = [
    {
      title: 'CLASS',
      type: 'check',
      datas: [
        {
          title: 'Attacker',
          id: 'attacker',
          checked: false
        },
        {
          title: 'Defender',
          id: 'defender',
          checked: false
        },
        {
          title: 'Supporter',
          id: 'supporter',
          checked: false
        }
      ]
    },
    {
      title: 'HERO',
      type: 'check',
      datas: [
        {
          title: 'Aoi',
          id: 'aoi',
          checked: false
        },
        {
          title: 'yamada',
          id: 'yamada',
          checked: false
        },
        {
          title: 'lazar',
          id: 'lazar',
          checked: false
        },
        {
          title: 'hill',
          id: 'hill',
          checked: false
        },
        {
          title: 'kurosawa',
          id: 'kurosawa',
          checked: false
        },
        {
          title: 'canoe',
          id: 'canoe',
          checked: false
        },
        {
          title: 'miffy',
          id: 'miffy',
          checked: false
        },
        {
          title: 'dragonscale',
          id: 'dragonscale',
          checked: false
        },
        {
          title: 'astral',
          id: 'astral',
          checked: false
        },
        {
          title: 'mariana',
          id: 'mariana',
          checked: false
        }
      ]
    },
    {
      title: 'LEVEL',
      type: 'slider',
      valueMin: 1,
      valueMax: 6,
      cfg: {
        min: 1,
        max: 10,
        masks: {
          1: 'L1',
          10: 'L10'
        }
      }
    },
    {
      title: 'PRICE RANGE (WBNB)',
      type: 'range',
      valueMin: undefined,
      valueMax: 5
    }
  ]

  private weaponFilterData: IFilterCfg[] = [
    {
      title: 'WEAPON',
      type: 'check',
      datas: [
        {
          title: 'Assault Rifle',
          id: 'assault rifle',
          checked: false
        },
        {
          title: 'Dragon Firethrower',
          id: 'dragon firethrower',
          checked: false
        },
        {
          title: 'Frost Machine Gun',
          id: 'frost machine gun',
          checked: false
        },
        {
          title: 'Lightning',
          id: 'lightning',
          checked: false
        },
        {
          title: 'Shotgun',
          id: 'shotgun',
          checked: false
        },
        {
          title: 'Single Shot Rocket Launcher',
          id: 'single shot rocket launcher',
          checked: false
        },
        {
          title: 'Sniper Rifle',
          id: 'sniper rifle',
          checked: false
        }
      ]
    },
    {
      title: 'LEVEL',
      type: 'slider',
      valueMin: 1,
      valueMax: 6,
      cfg: {
        min: 1,
        max: 10,
        masks: {
          1: 'L1',
          10: 'L10'
        }
      }
    },
    {
      title: 'PRICE RANGE (WBNB)',
      type: 'range',
      valueMin: undefined,
      valueMax: 5
    }
  ]

  private chipFilterData: IFilterCfg[] = [
    {
      title: 'QUALITY',
      type: 'check',
      datas: [
        {
          title: 'green',
          id: 'green',
          checked: false
        },
        {
          title: 'blue',
          id: 'blue',
          checked: false
        },
        {
          title: 'orange',
          id: 'orange',
          checked: false
        },
        {
          title: 'purple',
          id: 'purple',
          checked: false
        }
      ]
    },
    {
      title: 'PRICE RANGE (WBNB)',
      type: 'range',
      valueMin: undefined,
      valueMax: 5
    }
  ]

  get currentFilterData(): IFilterCfg[] {
    switch (this.nftType) {
      case 0:
        return this.heroFilterData
      case 1:
        return this.weaponFilterData
      case 2:
        return this.chipFilterData
      default:
        return this.heroFilterData
    }
  }

  onClickClearAll() {
    const currentDatas = this.currentFilterData
    for (const data of currentDatas) {
      switch (data.type) {
        case 'check':
          for (const _d of data.datas!) {
            _d.checked = false
          }
          break
        case 'slider':
          data.valueMin = data.cfg!.min
          data.valueMax = data.cfg!.max
          break
        case 'range':
          data.valueMin = undefined
          data.valueMax = undefined
          break
      }
    }
    this.$forceUpdate()
  }

  hideFilter() {
    this.$emit('filter-show', false)
  }
}
</script>
<style lang="scss" scoped>
.searchPanel {
  display: flex;
  flex-direction: column;
  width: 20.875em;
  max-width: 100%;
  padding: 2.5em;
  box-sizing: border-box;
  .root{
    display: flex;
    flex-direction: column;
    cursor: default;
    .header{
      display: flex;
      flex-direction: row;
      padding: 0.75em 0;
      border-bottom: 1px solid #51529D;
      width: 100%;
      .label{
        display: flex;
        flex: 1;
        font-size: 0.875em;
        color: white;
      }
      .button{
        display: flex;
        background: none;
        border: none;
        outline: none;
        font-weight: bold;
        font-size: 0.875em;
        color: #46E0F4;
        cursor: pointer;
      }
    }
  }
  .content{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

.filter-btn {
  display: none;
}
.filter-header {
  display: none;
}
@media (max-width: 767px) {
  .searchPanel{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 26;
    background-color: black;
    overflow-y: scroll;
    display: none;
    .root {
      margin-bottom: 140px;
      margin-top: 76px;
    }
  }
  .filter-btn{
    width: 100vw;
    max-width: 100%;
    background: #130933;
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 16px;
    display: flex;
    z-index: 10;
    transition: transform linear .2s,opacity linear .2s;
    box-sizing: border-box;
    flex-direction: column;
  }
  .btnApply {
    line-height: inherit;
    padding: 20px 0;
    margin: 40px 24px 45px;
    height: 55px;
    span {
      font-size: 1.125em;
    }
  }

  .filter-header {
    width: 100vw;
    max-width: 100%;
    background: #130933;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    z-index: 10;
    transition: transform linear .2s,opacity linear .2s;
    box-sizing: border-box;
    flex-direction: column;
    font-size: 20px;
    font-weight: bold;
    color: white;
    padding: 22.5px 24px 33px 24px;
    .icon {
      margin-right: 25px;
      width: 12px;
    }
  }
}
.el-slider {
  .el-slider__input {
    margin-top: 0;
  }
  .el-slider__runway {
    height: 32px;
    margin-top: 0;
    margin-bottom: 0 !important;
    background-color: #FFFFFF;
    border: 1px solid #DCDFE6;
    .el-slider__bar {
      height: 31px;
    }
    .el-slider__button-wrapper {
      top: 0;
      height: 32px;
      .el-slider__button {
        width: 4px;
        height: 31px;
        border-radius: 0;
        background: #FFFFFF;
        border: solid 2px #0068A5;
      }
    }
    .el-slider__stop {
      width: 1px;
      height: 31px;
      border-radius: 0;
      background-color: #DCDFE6;
    }
    .el-slider__marks-text {
      color: #717171;
      margin-top: 0;
      transform: translateX(-115%);
    }
  }
}

</style>
