mixin filter-operator-dropdown
  mp-builder-dropdown.pvs-filter-operator-dropdown(
    attrs={
      options: JSON.stringify($helpers.getFilterOperators()),
      'selected-option': propertyFilter.filterOperator,
    }
    on={
      change: e => $helpers.changeFilterOperator(e.detail.value),
    }
  )

mixin filter-number-input({value=``, onInput=null, autofocus=false, key=null})
  input.pvs-filter-numdate-input(
    attrs={
      type: `number`,
    }
    props={
      value,
    }
    on={
      input: onInput,
    }
    hook={
      insert: autofocus ? vnode => $helpers.focusInput(vnode.elm) : null,
    }
    key=key
  )

mixin filter-string-input
  input.pvs-filter-string-input(
    attrs={
      type: `text`,
    }
    props={
      value: propertyFilter.filterValue,
    }
    on={
      input: e => $helpers.changeFilterValue(e.target.value),
    }
    key=`string-${propertyFilter.filterOperator}`
    hook={
      insert: vnode => $helpers.focusInput(vnode.elm),
    }
  )

.pvs-container(
  class={
    'pvs-display-context-custom-event': $helpers.getDisplayContext() === $helpers.PropertyFilterDisplayContext.CustomEvent,
  }
  hook={postpatch: $helpers.dispatchDraw}
)
  .pvs-title-section
    if $helpers.hasBackButton()
      .pvs-back-button(
        on={
          click: $helpers.clickBackButton,
        }
      )
        svg-icon(attrs={icon: `caret-left`})
    .pvs-property-type-container
      .pvs-property-type-button(
        on={
          click: $helpers.clickPropertyTypeButton,
        }
      )
        svg-icon(attrs={icon: $helpers.getPropertyTypeIcon()})
        - const propertyLabel = $helpers.getPropertyLabel()
        span.pvs-property-type-label(
          attrs={
            title: propertyLabel,
          }
        )= $helpers.truncateMiddle(propertyLabel, 30)
        svg-icon(attrs={icon: `caret-down`})
      .pvs-property-types-menu
        mp-drop-menu(
          attrs={open: editingPropertyType}
          on={
            change: $helpers.changePropertyTypesMenu,
          }
        )
          mp-items-menu(
            attrs={
              sections: JSON.stringify($helpers.getPropertyTypeMenuSections()),
            }
            on={
              clickItem: $helpers.clickPropertyTypesMenuItem,
            }
          )

  .pvs-filter-section
    - const {propertyType} = propertyFilter
    case propertyType
      when $helpers.PropertyType.Number
        .pvs-filter-fixed-subsection
          +filter-operator-dropdown
        .pvs-filter-fixed-subsection(
          class={
            'pvs-filter-numdate-between': propertyFilter.filterOperator === $helpers.NumberOperator.Between,
          }
        )
          case propertyFilter.filterOperator
            when $helpers.NumberOperator.Between
              - const [minNum, maxNum] = propertyFilter.filterValue
              +filter-number-input({
                value: minNum,
                onInput: ev => $helpers.changeFilterValue(
                  [$helpers.parseNumber(ev.target.value), maxNum]
                ),
                autofocus: true,
                key: `num-min`,
              })
              .pvs-filter-conjunction and
              +filter-number-input({
                value: maxNum,
                onInput: ev => $helpers.changeFilterValue(
                  [minNum, $helpers.parseNumber(ev.target.value)]
                ),
                autofocus: false,
                key: `num-max`,
              })
            default
              +filter-number-input({
                value: propertyFilter.filterValue,
                onInput: e => $helpers.changeFilterValue($helpers.parseNumber(e.target.value)),
                autofocus: true,
                key: `num-val-${propertyFilter.filterOperator}`,
              })

      when $helpers.PropertyType.Boolean
      when $helpers.PropertyType.List
        .pvs-filter-fixed-subsection.pvs-filter-radio-list
          // TODO(mack): For the custom events property filter, we only support 'contains' operator.
          // Use a different UI rather than a single radio button in this case?
          each filterOperator in $helpers.getFilterOperators()
            .pvs-radio-button-container
              mp-radio-button(
                attrs={
                  selected: filterOperator === propertyFilter.filterOperator,
                }
                on={
                  click: () => $helpers.changeFilterOperator(filterOperator),
                }
              )= filterOperator
        if propertyType === $helpers.PropertyType.List
          .pvs-filter-fixed-subsection
            +filter-string-input

      when $helpers.PropertyType.String
        .pvs-filter-fixed-subsection
          +filter-operator-dropdown
         case propertyFilter.filterOperator
           when $helpers.StringOperator.Contains
           when $helpers.StringOperator.DoesNotContain
            .pvs-filter-fixed-subsection
               +filter-string-input
             if $helpers.isLoadingPropertyValues()
               .pvs-filter-property-values-loading
                 mp-spinner
             else
               .pvs-filter-property-values
                 mp-items-menu.pvs-property-value-list(
                   attrs=$helpers.filterAttributes({
                     progressive: true,
                     'search-filter': propertyFilter.filterValue ? $helpers.renamePropertyValue(propertyFilter.filterValue) : null,
                     sections: JSON.stringify($helpers.getPropertyValueSections()),
                   })
                   on={
                     clickItem: e => $helpers.selectContainsPropertyValue(e.detail.item.propertyValue),
                     draw: $helpers.propagateEvent,
                   }
                   props=$helpers.getItemsMenuProps()
                 )
           when $helpers.StringOperator.Equals
           when $helpers.StringOperator.DoesNotEqual
             .pvs-filter-fixed-subsection
               mp-icon-input(
                 attrs={
                   icon: `search`,
                   placeholder: `Search`,
                 }
                  props={
                   value: searchFilter,
                  }
                 key=`string-${propertyFilter.filterOperator}`
                 hook={
                   insert: vnode => $helpers.insertedIconInput(vnode.elm),
                 }
                 on={
                   input: e => $helpers.changeSearchFilter(e.target.value),
                 }
               )
             if $helpers.isLoadingPropertyValues() && !searchFilter
               .pvs-filter-property-values-loading
                 mp-spinner
             else
               .pvs-filter-property-values
                 mp-checkbox-list(
                   attrs=$helpers.filterAttributes({
                     progressive: true,
                     'search-filter': searchFilter,
                     items: JSON.stringify($helpers.getPropertyValueItems()),
                   })
                   on={
                     selectAll: $helpers.selectAllPropertyValues,
                     unselectAll: $helpers.unselectAllPropertyValues,
                     clickItem: e => $helpers.toggleFilterItem(e.detail.item),
                     draw: $helpers.propagateEvent,
                   }
                   props=$helpers.getItemsMenuProps()
                 )

      when $helpers.PropertyType.Datetime
        mp-date-range-picker(
          attrs=$helpers.filterAttributes({
            'display-context': $helpers.getDateRangePickerDisplayContext(),
            'date-range': JSON.stringify(propertyFilter.filterValue),
          })
          on={
            changeDateRange: $helpers.changeDateRange,
            draw: $helpers.propagateEvent,
          }
        )

  mp-button-bar.mp-button-bar-primary(
    attrs={
      disabled: !propertyFilter.isValid(),
    }
    on={
      click: $helpers.clickAddFilter,
    }
  ) Add filter