<template>
  <q-carousel
    v-model="volume"
    transition-prev="slide-right"
    transition-next="slide-left"
    animated
    swipeable
    control-color="primary"
    navigation
    arrows
  >
    <q-carousel-slide v-for="volume in props.volumes" :key="volume.id" :name="volume.id">
      <q-input
        class="q-pa-sm"
        :model-value="volume.volume"
        outlined
        readonly
        dense
        label="Inhalt"
        mask="#.###"
        fill-mask="0"
        suffix="L"
      />
      <div class="full-width row q-gutter-sm q-pa-sm justify-around">
        <div v-for="(min_price, index) in volume.min_prices" :key="index">
          <q-badge class="text-body1" color="primary"> {{ min_price.percentage }}% </q-badge>
          <div class="text-body1">{{ min_price.price.toFixed(3) }}€</div>
        </div>
      </div>
      <div class="q-pa-sm">
        <div v-for="(price, index) in volume.prices" :key="price.id">
          <div class="fit row justify-around q-py-sm">
            <div class="text-body1 col-xs-12 col-md-4">{{ price.price.toFixed(2) }}€</div>
            <div class="text-body1 col-xs-12 col-md-4">
              <q-toggle
                :model-value="price.public"
                disable
                checked-icon="mdi-earth"
                unchecked-icon="mdi-earth-off"
              />
            </div>
            <div class="text-body1 col-xs-12 col-md-4">
              {{ price.description }}
            </div>
          </div>
          <q-separator v-if="index < volume.prices.length - 1" />
        </div>
      </div>
      <div class="q-pa-sm">
        <ingredients :ingredients="volume.ingredients" :volume="volume" />
      </div>
    </q-carousel-slide>
  </q-carousel>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref } from 'vue';
import { Drink } from 'src/plugins/pricelist/store';
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';

export default defineComponent({
  name: 'DrinkPriceVolume',
  components: { Ingredients },
  props: {
    props: {
      type: Object as PropType<Drink>,
      required: true,
    },
  },
  setup(props) {
    const _volume = ref<number|undefined>();
    const volume = computed<number|undefined>({
      get: () => {
        if (_volume.value !== undefined) {
          return _volume.value;
        }
        if (props.props.volumes.length > 0) {
          return props.props.volumes[0].id;
        }
        return undefined;
      },
      set: (val: number|undefined) => (_volume.value = val),
    });
    return { volume };
  },
});
</script>

<style scoped></style>