<script setup lang="ts">
import { chunks } from '~/helpers';
import * as d3 from "d3";

const point_array = useState<number[][] | undefined>('point_array', () => undefined)
const chunk_size = useState<number>('chunk_size', () => 8)
const threshold = useState<number>('threshold', () => 20)

const paths_array = ref<{ path: string, unwalkable: boolean, x: number, y: number }[]>()

const props = defineProps(['cw', 'ch'])

const d3svg = ref()

const sampling_data = () => {
    const points = point_array.value
    const chunk = chunk_size.value
    if (!points) return
    const prepared_array = [...chunks(points, chunk)].map(line => {
        const line_data = [] as any[][]
        line.map((item: any) => [...chunks(item, chunk)]).map((item) => {
            item.map((one_line, k) => {
                if (!line_data[k]) line_data[k] = []
                line_data[k].push(...one_line)
            })
        })
        return line_data.map(el => {
            return el.filter(e => e > 0).length > threshold.value ? 1 : 0
        })
    });
    const res: any[] = []
    prepared_array.forEach((line, indexY) => {
        line.forEach((point, indexX) => {
            const targetX = indexX * chunk
            const targetY = indexY * chunk
            res.push({
                path: `M${targetX} ${targetY} ${targetX + chunk} ${targetY} ${targetX + chunk} ${targetY + chunk} ${targetX} ${targetY + chunk}Z`,
                unwalkable: !!point,
                x: indexX,
                y: indexY,
            })
        })
    })
    paths_array.value = res

    console.time('redraw D3')
    const svg = d3.select('#d3svg')
    // svg.selectAll("path").remove();
    const path_elements = svg.selectAll("path")

    paths_array.value.forEach((element, i) => {
        if (!d3.select(path_elements.nodes()[i]).empty()) {
            console.log(`update ${i}`)
            d3.select(path_elements.nodes()[i])
                .transition()
                .duration(300)
                .attr('d', element.path)
                .attr('class', element.unwalkable ? 'unwalkable' : 'walkable')
        } else {
            console.log(`add ${i}`)
            svg.append("path")
                .attr('d', element.path)
                .attr('class', element.unwalkable ? 'unwalkable' : 'walkable')
        }
    });
    console.timeEnd('redraw D3')
}
watch(point_array, () => {
    console.log('point_array')
    sampling_data()
})
watch(chunk_size, () => {
    console.log('chunk size')
    sampling_data()
})
watch(threshold, () => {
    console.log('threshold')
    sampling_data()
})
onMounted(() => {
    sampling_data()
})
</script>
<template>
    <div>
        <svg :width="props.cw" :height="props.ch" v-if="false">
            <path v-for="item in paths_array" :d="item.path" :class="[
                { 'unwalkable': item.unwalkable },
                // { 'endPoint': (endPoint && item.x == endPoint.x && item.y == endPoint.y) },
                // { 'startPoint': (startPoint && item.x == startPoint.x && item.y == startPoint.y) },
                // { 'pathPoint': (startToEndPath && startToEndPath.find((el: number[]) => el[0] == item.x && el[1] == item.y)) },
            ]">
            </path>
        </svg>
        <svg :width="props.cw" :height="props.ch" ref="d3svg" id="d3svg"></svg>
    </div>
</template>

<style>
svg path {
    fill: transparent;
    stroke: rgba(70, 70, 0, 0.1);
}

svg path:hover {
    fill: red
}

svg path.unwalkable {
    fill: rgba(70, 70, 0, 0.5);
}

svg path.endPoint {
    fill: blue;
}

svg path.startPoint {
    fill: lawngreen;
}

svg path.pathPoint {
    fill: gold;
}
</style>