<script lang="ts">
 import { Block, BlockTitle } from "@gradio/atoms";
 import uiState from "$lib/stores/uiState";
 import WidgetContainer from "./WidgetContainer.svelte"
 import BlockContainer from "./BlockContainer.svelte"
 import AccordionContainer from "./AccordionContainer.svelte"
 import TabsContainer from "./TabsContainer.svelte"

 import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';

 import {fade} from 'svelte/transition';
 // notice - fade in works fine but don't add svelte's fade-out (known issue)
 import {cubicIn} from 'svelte/easing';
 import { flip } from 'svelte/animate';
 import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
 import { startDrag, stopDrag } from "$lib/utils"

 export let container: ContainerLayout | null = null;
 export let zIndex: number = 0;
 export let classes: string[] = [];
 export let showHandles: boolean = false;
 let attrsChanged: Writable<boolean> | null = null;

 $: if (container) {
     attrsChanged = container.attrsChanged
 }
 else {
     attrsChanged = null
 }
</script>

{#if container}
    {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
    {@const dragDisabled = zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked}
    {#key $attrsChanged}
        {#if container.attrs.variant === "tabs"}
            <TabsContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
        {:else if container.attrs.variant === "accordion"}
            <AccordionContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
        {:else}
            <BlockContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
        {/if}
    {/key}
{/if}
