<script lang="tsx">
import { defineComponent, type PropType, computed } from 'vue'
import ARKCheckbox from '../../checkbox/ARKCheckbox.vue'
import { CheckboxSelectFilter } from '../Filters'

export default defineComponent({
  props: {
    filter: {
      type: Object as PropType<CheckboxSelectFilter>,
      required: true,
    },
  },
  setup(props) {
    const isColumnView = computed(() => props.filter.options.length > 2)

    const onClick = (value: CheckboxSelectFilter['value'][number]) => {
      if (props.filter.hasValue(value)) {
        props.filter.removeValue(value)
      } else {
        props.filter.addValue(value)
      }
    }

    return () => (

      <div class="ark-ui-filterbar-checkbox-select-filter">
        <div class="ark-ui-filterbar-checkbox-select-filter-label">{props.filter.label} {props.filter.value.length}</div>

        <div class={`ark-ui-filterbar-checkbox-select-filter-body ${isColumnView.value ? 'column' : ''}`}>
          {props.filter.options.map((option) => (

            <div
              class="ark-ui-filterbar-checkbox-select-filter-option"
              onClick={() => onClick(option)}
            >
              <ARKCheckbox
                modelValue={props.filter.hasValue(option)}
                onValueChange={() => {
                  // do nothing
                }}
              />

              {option.name}
            </div>

          ))}
        </div>
      </div>

    )
  },
})
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';
.ark-ui-filterbar-checkbox-select-filter {
  &-label {
    font-size: 14px;
    color: $placeholder-grey;
    margin-bottom: 16px;
  }

  &-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;

    &.column {
      flex-direction: column;
    }
  }

  &-option {
    display: flex;
    gap: 8px;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>
