<!--
    Describe this component...
-->

<template>
    <div :class="bem()">
        <px-icon-button :class="bem('button')" :src="currentButtonIcon" @click="buttonClick" />
        <px-scrubber
            :class="bem('scrubber')"
            v-model:progress="progress"
            @seek="seek"
            @dragstart="dragStart"
            @dragend="dragEnd"
        />
        <span :class="bem('time')">{{ time }}</span>
    </div>
</template>

<script>
import PxIconButton from './PxIconButton.vue';
import PxScrubber from './PxScrubber.vue';

import iconPause from '../assets/feather/pause-circle.svg?url';
import iconPlay from '../assets/feather/play-circle.svg?url';

export default {
    name: 'px-gsap-scrubber',
    components: { PxIconButton, PxScrubber },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return { timeline: null, progress: 0, isPlaying: false };
    },
    computed: {
        currentButtonIcon() {
            return this.isPlaying ? iconPause : iconPlay;
        },
        time() {
            if (this.timeline) {
                let t = this.timeline;
                let seconds = t.duration() * this.progress;
                let mins = Math.floor(seconds / 60);

                seconds -= mins * 60;
                seconds = Math.round(seconds * 100);
                seconds = seconds.toString().padStart(4, '0');
                seconds = seconds.slice(0, 2) + '.' + seconds.slice(2, 4);

                mins = Math.round(mins || 0)
                    .toString()
                    .padStart(2, '0');

                return `${mins}:${seconds}`;
            }
            return null;
        },
    },
    // watch: {},
    // mounted() {},
    beforeUnmount() {
        if (this.timeline) {
            this.timeline.eventCallback('onUpdate', null);
        }
    },
    methods: {
        buttonClick() {
            if (this.isPlaying) {
                this.pause();
            } else {
                this.play();
            }
        },
        setTimeline(t) {
            // TODO: a timeline can only have one handler for onUpdate so if we're using this already
            // we would need to somehow and capture and proxy the event from within our handler

            if (this.timeline) {
                this.timeline.eventCallback('onUpdate', null);
            }

            this.timeline = t;

            if (this.timeline) {
                this.progress = this.timeline.progress();
                this.isPlaying = !this.timeline.paused();

                this.timeline.eventCallback('onUpdate', () => {
                    this.progress = this.timeline.progress();
                    this.isPlaying = !this.timeline.paused();
                });
            }
        },
        pause() {
            if (this.timeline) {
                this.isPlaying = false;
                this.timeline.pause();
            }
        },
        play() {
            if (this.timeline) {
                this.isPlaying = true;
                this.timeline.play();
            }
        },
        dragStart() {
            this.wasPlaying = this.isPlaying;
            this.pause();
        },
        dragEnd() {
            if (this.wasPlaying) {
                this.play();
            }
        },
        seek(e) {
            this.timeline.progress(e.progress);
        },
    },
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;

.px-gsap-scrubber {
    width: 100%;
    padding: 0.25em 1em;
    display: flex;
    gap: 0.5em;
    align-items: center;

    &__button {
        flex: none;
    }

    &__scrubber {
        flex: 1;
    }

    &__time {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 12px;
    }
}
</style>
