import Vue from "vue";
import Loading from "./icons/LoadingIcon.vue";
import debounce from "lodash.debounce";
import presets from "./presets";
let svg;
export default Vue.extend({
    name: "FlowChart",
    components: { Loading },
    props: {
        id: { type: String, required: true },
        code: { type: String, required: true },
        preset: { type: String, default: "vue" },
    },
    data: () => ({
        loading: true,
        scale: 1,
    }),
    computed: {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        $preset() {
            const preset = presets[this.preset];
            if (!preset) {
                console.warn(`[md-enhance:flowchart] Unknown preset: ${this.preset}`);
                return presets.vue;
            }
            return preset;
        },
        resize() {
            return debounce(() => {
                const scale = this.getScale(window.innerWidth);
                if (this.scale !== scale) {
                    this.scale = scale;
                    svg.drawSVG(this.id, { ...this.$preset, scale });
                }
            }, 100);
        },
    },
    mounted() {
        const delay = () => new Promise((resolve) => setTimeout(resolve, 500));
        this.$el.setAttribute("id", this.id);
        void Promise.all([
            import(/* webpackChunkName: "flowchart" */ "flowchart.js"),
            delay(),
        ]).then(([flowchart]) => {
            const { parse } = flowchart;
            svg = parse(this.code);
            this.scale = this.getScale(window.innerWidth);
            svg.drawSVG(this.id, { ...this.$preset, scale: this.scale });
            this.loading = false;
            window.addEventListener("resize", this.resize);
        });
    },
    // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
    beforeDestroy() {
        window.removeEventListener("resize", this.resize);
    },
    methods: {
        getScale(width) {
            return width < 419 ? 0.8 : width > 1280 ? 1 : 0.9;
        },
    },
});
