<template>
  <q-form @submit="submit">
    <div class="row q-gutter-y-md">
      <q-select
        v-model="resultingServices"
        :label="$t('services.serviceName')"
        :multiple="true"
        class="col-12"
        :map-options="true"
        filled
        :options="serviceOptions"
        :emit-value="true"
      >
        <template #option="scope">
          <template v-if="scope.index === 0">
            <q-item>
              <q-item-section side>
                <q-checkbox
                  :value="areAllServicesSelected"
                  :indeterminate-value="null"
                  @input="selectAll"
                />
              </q-item-section>
              <q-item-section>
                <q-item-label v-text="$t('base.all')" />
              </q-item-section>
            </q-item>
            <q-separator inset />
          </template>
          <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
            <q-item-section side>
              <q-checkbox
                :value="scope.selected"
                @input="scope.itemEvents.click"
              />
            </q-item-section>
            <q-item-section>
              <q-item-label v-html="scope.opt.label" />
            </q-item-section>
          </q-item>
        </template>
      </q-select>
      <q-btn color="primary" :label="$t('notifications.send')" type="submit" />
    </div>
  </q-form>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
import Vue from 'vue';
import InputData from '@/types/wf/InputData';

@Component({})
export default class SetServiceVisibility extends Vue {
  @Prop() readonly inputData: InputData;

  resultingServices = [];

  get areAllServicesSelected(): boolean {
    return this.serviceOptions.length === this.resultingServices.length;
  }

  selectAll(): void {
    this.areAllServicesSelected
      ? (this.resultingServices = [])
      : (this.resultingServices = this.serviceOptions.map(
          (option: any) => option.value
        ));
  }

  get serviceOptions() {
    return (
      // @ts-ignore
      this.inputData?.organization?.services?.map((service: any) => {
        return {
          label: service.fullName,
          value: service.id,
        };
      }) || []
    );
  }

  private submit(e: any): void {
    this.$emit('submit', e, { serviceIds: this.resultingServices });
  }
}
</script>

<style scoped></style>
