<template>
  <div>
    <div class="ui-toggle-group">
      <div class="ui-toggle-group__header">
        <slot name="before-title"></slot>
        <div class="text-h4 ui-toggle-group__title">{{ title }}</div>
        <slot name="after-title"></slot>
      </div>
      <div class="ui-toggle-group__options">
        <div v-for="option in options" :key="option.label">
          <ui-toggle
            v-model="option.value"
            :labels="getLabels(option)"
            class="text-blue-grey"
          />
        </div>
      </div>
      <div class="ui-toggle-group__footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import UiToggle from './UiToggle.vue'

type Option<T> = { value: T; label: string }

@Component({ components: { UiToggle } })
export default class UiToggleGroup extends Vue {
  @Prop({ type: String, default: 'Опции' })
  title!: string

  @Prop({ type: Array, required: true })
  options!: Option<any>[]

  getLabels(option: { label: string }) {
    return {
      off: option.label,
      on: option.label,
    }
  }
}
</script>
