<template>
    <canvas ref="waveform">
    </canvas>
</template>

<script>
//  import util from "../../plugins/utils";

export default {
    props: {
        event: {
            type: Object,
            default: function () {
                return null;
            },
        },
    },
    data() {
        return {
        };
    },
    mounted() {
        this.drawWaveform(this.event);
    },
    methods: {
        drawWaveform(event) {
            const canvas = this.$refs.waveform;
            if (canvas) {
                const dpr = window.devicePixelRatio || 1;
                canvas.width = canvas.offsetWidth * dpr;
                canvas.height = (canvas.offsetHeight) * dpr;

                const ctx = canvas.getContext("2d");

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                const base64content = event ? event.getContent().formatted_body : undefined;
                if (base64content) {
                    const data = atob(base64content).split('').map(function (c) { return c.charCodeAt(0); });

                    const drawLineSegment = (ctx, x, y0, data) => {
                        ctx.lineWidth = 1; // how thick the line is
                        ctx.strokeStyle = "#000"; // what color our line is
                        ctx.beginPath();
                        ctx.moveTo(x, y0 - data);
                        ctx.lineTo(x, y0 + data);
                        ctx.stroke();
                    };

                    console.log("W", canvas.width, canvas.height, canvas.offsetWidth, canvas.offsetHeight);

                    const width = canvas.width;
                    const height = canvas.height;
                    const samples = data.length;
                    for (let i = 0; i < width; i++) {
                        if (i % 4 == 2 || i % 4 == 3) continue;
                        const iSample = Math.floor(width == 0 ? 0 :(1000 * i) / width);
                        const sample = iSample < samples ? data[iSample] : 0;
                        drawLineSegment(ctx, i, height/2, (sample / 255) * height / 2);
                    }
                }
            }

        }
    },
    watch: {
        event: {
            immediate: false,
            handler(event) {
                this.drawWaveform(event);
            }
        }
    }
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>