<script lang="ts">
    import {dndzone, TRIGGERS, SHADOW_ITEM_MARKER_PROPERTY_NAME} from 'svelte-dnd-action';
    import {flip} from 'svelte/animate';

    import type { PlanWeekItemItem } from '../../stores/planStore'
    import PlanTodoInput from './PlanTodoInput.svelte'
    import Text from '../TextInput.svelte';
    import shortid from 'shortid'

    export let items: Array<PlanWeekItemItem> = [];
    export let onInput: () => void;
    
    const flipDurationMs = 200;
    let shouldIgnoreDndEvents = false;

    function handleConsider(e: any) {
      // let sortedItems: Array<PlanWeekItemItem> = [];
      
      // e.detail.items.forEach((it: PlanWeekItemItem) => {
      //   if (it.text.trim().length != 0) {
      //     sortedItems.push(it);
      //   }
        
      // });

      // items = sortedItems;

      const {trigger, id} = e.detail.info;
        if (trigger === TRIGGERS.DRAG_STARTED) {
            console.warn(`copying ${id}`);
            const idx = items.findIndex(item => item.id === id);
            const newId = shortid.generate();
						// the line below was added in order to be compatible with version svelte-dnd-action 0.7.4 and above 
					  e.detail.items = e.detail.items.filter(item => !item[SHADOW_ITEM_MARKER_PROPERTY_NAME]);
            e.detail.items.splice(idx, 0, {...items[idx], id: newId});
            items = e.detail.items;
            shouldIgnoreDndEvents = true;
        }
        else if (!shouldIgnoreDndEvents) {
          let sortedItems: Array<PlanWeekItemItem> = [];
          
          e.detail.items.forEach((it: PlanWeekItemItem) => {
            if (it.text.trim().length != 0) {
              sortedItems.push(it);
            }
            
          });

          items = sortedItems;
            // items = e.detail.items;
        }
        else {
            items = [...items];
        }

      onInput();
    }

    function handleSort(e: any) {
      let sortedItems: Array<PlanWeekItemItem> = [];
      
      e.detail.items.forEach((it: PlanWeekItemItem) => {
        if (it.text.trim().length != 0) {
          sortedItems.push(it);
        }
        
      });

      items = sortedItems;

      onInput();
    }
    
    let newItem: string = "";

    function onInputNewItem() {
      if (newItem.trim().length != 0) {
        items = [...items, {id: shortid.generate(), text: newItem}];
      }
      newItem = "";

      onInput();
    }
    
    function onKeypress(e: KeyboardEvent, ) {
      if(e.key == "Enter") {
        onInputNewItem();
      }
    }
</script>

<div class="newItemInput">
  <Text bind:val={newItem} onInput={onInput} onBlur={onInputNewItem} onKeypress={onKeypress} placeholder={"New Item"}/>
</div>
<section contenteditable="true" use:dndzone={{items, flipDurationMs, dropFromOthersDisabled: true}} on:consider={handleConsider} on:finalize={handleSort}>
      {#each items as item(item.id)}
          <div class="planRow" animate:flip={{duration:flipDurationMs}}>
            <div class="planInput">
              <PlanTodoInput bind:text={item.text} bind:done={item.done} bind:todo={item.todo} onInput={onInput}/>
            </div>
          </div>
      {/each}
</section>

<style>
  .planInput {
    width: 80%;
  }
  
  .planRow {
    /* display: flex; */
    width: 100%;
    min-height: 1rem;
  }
  
  .newItemInput {
    width: 90%;
  }

  div {
    border: 1px solid;
  }
</style>