<template>
    <div class="beat-settings" v-if="beat">
        <div class="beat-settings-options">
            <div class="beat-settings-boxes beat-settings-option">
                <number-input label="Bars: " v-model="beat!.barCount.value" :disabled="beat!.barSettingsLocked.value" /> 
            </div>
            <div class="beat-settings-bar-count beat-settings-option">
                <number-input label="Boxes per bar: " v-model="beat!.timeSigUp.value" /> 
            </div>
            <div class="beat-settings-bar-count beat-settings-option">
                <bool-box label="Auto beat length: " v-model="beat!.useAutoBeatLength.value" />
            </div>
            <action-button
                label="New Track"
                @click="() => beat!.addTrack()" />
            <div>
                <track-settings 
                    v-for="(_, i) in beat!.tracks.value ?? []"
                    :key="i"
                    :beat-index="beatIndex"
                    :track-index="i" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import NumberInput from "@/ui/Widgets/NumberInput/NumberInput.vue";
    import BoolBox from "@/ui/Widgets/BoolBox/BoolBox.vue";
    import TrackSettings from "@/ui/TrackSettings/TrackSettings.vue";
    import { useBeatStore } from '@/BeatStore';
    import ActionButton from "@/ui/Widgets/ActionButton/ActionButton.vue";
    import { computed } from "vue";

    const props = defineProps<{
        beatIndex: number,
    }>();
    
    const { beats } = useBeatStore();

    const beat = computed(() => beats.value[props.beatIndex] ?? null);
</script>

<style scoped lang="scss">
    .beat-settings {
    }

    .beat-settings-options {
        padding: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .beat-settings-option {
        text-align: center;
    }

    .beat-settings-option-group {
        display: none;
    }
    .beat-settings-option-group.visible {
        display: inline-block;
    }
</style>
