Component({
  externalClasses: ['wr-class'],

  options: {
    multipleSlots: true,
  },

  properties: {
    overall: {
      type: Number,
      value: 1,
      observer(overall) {
        this.setData({
          overall,
        });
      },
    },
    layout: {
      type: Number,
      value: 1,
      observer(layout) {
        this.setData({
          layout,
        });
      },
    },
    priceSorts: {
      type: String,
      value: '',
      observer(priceSorts) {
        this.setData({
          priceSorts,
        });
      },
    },
    soldSorts: {
      type: String,
      value: '',
      observer(soldSorts) {
        this.setData({
          soldSorts,
        });
      },
    },
    color: {
      type: String,
      value: '#FA550F',
    },
  },

  data: {
    layout: 1,
    overall: 1,
    priceSorts: '',
    soldSorts: '',
  },

  methods: {
    onChangeShowAction() {
      const { layout } = this.data;
      const nextLayout = layout === 1 ? 0 : 1;
      this.triggerEvent('change', { ...this.properties, layout: nextLayout });
    },

    handlePriseSort() {
      const { priceSorts } = this.data;
      this.setData({
        soldSorts: ""
      })
      this.triggerEvent('change', {
        ...this.properties,
        overall: 0,
        soldSorts: '',
      });
      this.triggerEvent('change', {
        ...this.properties,
        overall: 0,
        priceSorts: priceSorts === 'desc' ? 'asc' : 'desc',
      });
    },

    handleSoldSort() {
      const { soldSorts } = this.data;
      this.setData({
        priceSorts: ""
      })
      this.triggerEvent('change', {
        ...this.properties,
        overall: 0,
        priceSorts: '',
      });
      this.triggerEvent('change', {
        ...this.properties,
        overall: 0,
        soldSorts: soldSorts === 'desc' ? 'asc' : 'desc',
      });
    },

    open() {
      this.triggerEvent('showFilterPopup', {
        show: true,
      });
    },

    onOverallAction() {
      const { overall } = this.data;
      const nextOverall = overall === 1 ? 0 : 1;
      const nextData = {
        priceSorts: '',
        soldSorts: '',
        prices: [],
      };
      this.triggerEvent('change', {
        ...this.properties,
        ...nextData,
        overall: nextOverall,
      });
    },
  },
});
