import { derived, writable } from 'svelte/store';
import { createClient } from '@supabase/supabase-js';
import { supabase } from '$lib/config';
import { maxSize } from '$lib/config';

const client = createClient(supabase.url, supabase.key);

export const sensor = writable({left: 0, top: 0, right: 0, bottom: 0});

const getBoxes = function getBoxes ({left, top, right, bottom}) {
  return [
    `box.ov."(${left},${top},${right},${bottom})"`,
    `box.ov."(${left+maxSize},${top+maxSize},${right+maxSize},${bottom+maxSize})"`,
    `box.ov."(${left+maxSize},${top},${right+maxSize},${bottom})"`,
    `box.ov."(${left},${top+maxSize},${right},${bottom+maxSize})"`
  ]
};

let ac = null;
export const widgets = derived(sensor, async function ($sensor, set) {

  const boxes = getBoxes($sensor);
  ac && ac.abort()
  ac = new AbortController();
  const { data } = await client
    .from('widgets')
    .select()
    .or(boxes.join(','))
    .abortSignal(ac.signal)
  return set(data);
});