<template>
    <track-container>
        <template v-if="!locked">
            <track-unit v-for="(trackUnit, i) in trackUnits" 
                :key="`tu${ trackIndex }${ i }`"
                :id="`tu${ trackIndex }${ i }`"
                class="track-unit"
                :class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
                :sticking-type="trackUnit.stickingType"
                :type="trackUnit.type"
                :on="trackUnit.on"
                @rotate-type="rotateTrackUnit(i)"
                @deactivate="deactivateUnit(i)"
                @toggle="toggle(i)"
                @apply-tool="applyCurrentToolToTrackUnit(i)" />
        </template>
        <template v-else>
            <track-unit v-for="(trackUnit, i) in trackUnits" 
                :key="`tu${ trackIndex }${ i }`"
                :id="`tu${ trackIndex }${ i }`"
                class="track-unit"
                :class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
                :sticking-type="trackUnit.stickingType"
                :type="trackUnit.type"
                :on="trackUnit.on" />
        </template>
    </track-container>
</template>

<script setup lang="ts">
    import TrackUnit from "@/ui/TrackUnit/TrackUnit.vue";
    import TrackContainer from "@/ui/Track/TrackContainer.vue";
    import { useBeatStore } from "@/BeatStore";
    import { computed } from 'vue';
    import { useAppStateStore } from "@/AppState";

    const props = defineProps<{
        beatIndex: number,
        locked?: boolean,
        trackIndex: number,
    }>();

    const { 
        selectedTool, 
        activeStickingType,
        activeTrackUnitType,
    } = useAppStateStore();

    const { beats } = useBeatStore();
    const beat = computed(() => beats.value[props.beatIndex] ?? null);
    const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);

    const trackUnits = computed(() => {
        const units = [];
        if (track.value) {
            for (let i = 0; i < track.value.unitCount(); i++) {
                const unit = track.value.getUnitByIndex(i);
                if (unit) { 
                    units.push(unit);
                }
            }
        }
        return units;
    });

    function toggle(index: number) {
        if (!track.value) return;
        if (selectedTool.value === 'track-unit-type') {
            track.value.toggleUnit(index);
        }
        if (track.value.getUnitByIndex(index)?.on) {
            applyCurrentToolToTrackUnit(index);
        }
    }

    function rotateTrackUnit(index: number) {
        track.value?.rotateUnit(index);
    }

    function deactivateUnit(index: number) {
        track.value?.setStickingType(index, 0);
        track.value?.setUnitOn(index, false);
    }

    function applyCurrentToolToTrackUnit(index: number) {
        switch (selectedTool.value) {
            case "sticking":
                track.value?.setStickingType(index, activeStickingType.value);
                break;
            case "track-unit-type":
                track.value?.updateUnit(index, { on: activeTrackUnitType.value === null ? false : true, type: activeTrackUnitType.value === null ? undefined : activeTrackUnitType.value });
                break;
        }
    }
</script>

<style scoped lang="scss">
    .track-unit {
        &.spaced {
            margin-bottom: 0;
            margin-right: 1em;
        }
    }
    .vertical-mode {
        .track-unit {
            &.spaced {
                margin-bottom: 1em;
                margin-right: 0;
            }
        }
    }
</style>
