<script>
  import { params, goto } from "@sveltech/routify"
  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
  import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { pipe } from "components/common/core"
  import { store } from "builderStore"
  import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/"
  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
  import { writable } from "svelte/store"

  export let screens = []

  $: sortedScreens = screens.sort(
    (s1, s2) => s1.props._instanceName > s2.props._instanceName
  )
  /* 
  Using a store here seems odd.... 
  have a look in the <ComponentsHierarchyChildren /> code file to find out why. 
  I have commented the dragDropStore parameter
  */
  const dragDropStore = writable({})

  let confirmDeleteDialog
  let componentToDelete = ""

  const joinPath = join("/")

  const normalizedName = name =>
    pipe(
      name,
      [
        trimCharsStart("./"),
        trimCharsStart("~/"),
        trimCharsStart("../"),
        trimChars(" "),
      ]
    )

  const changeScreen = screen => {
    store.setCurrentScreen(screen.props._instanceName)
    $goto(`./:page/${screen.props._instanceName}`)
  }
</script>

<div class="root">
  {#each sortedScreens as screen}
    <div
      class="budibase__nav-item screen-header-row"
      class:selected={$store.currentComponentInfo._id === screen.props._id}
      on:click|stopPropagation={() => changeScreen(screen)}>
      <span
        class="icon"
        class:rotate={$store.currentPreviewItem.name !== screen.props._instanceName}>
        {#if screen.props._children.length}
          <ArrowDownIcon />
        {/if}
      </span>

      <i class="ri-artboard-2-fill icon" />

      <span class="title">{screen.props._instanceName}</span>

      <div class="dropdown-menu">
        <ScreenDropdownMenu {screen} />
      </div>
    </div>

    {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
      <ComponentsHierarchyChildren
        components={screen.props._children}
        currentComponent={$store.currentComponentInfo}
        {dragDropStore} />
    {/if}
  {/each}
</div>

<style>
  .root {
    font-weight: 400;
    color: var(--ink);
  }

  .screen-header-row {
    display: flex;
    flex-direction: row;
  }

  .title {
    margin-left: 14px;
    font-size: 14px;
    font-weight: 400;
    flex: 1;
  }

  .icon {
    display: inline-block;
    transition: 0.2s;
    font-size: 24px;
    width: 18px;
    color: var(--grey-7);
  }

  .icon:nth-of-type(2) {
    width: 14px;
    margin: 0 0 0 5px;
  }

  .rotate :global(svg) {
    transform: rotate(-90deg);
  }

  .dropdown-menu {
    display: none;
    color: var(--ink);
    padding: 0 5px;
    width: 24px;
    height: 24px;
    border-style: none;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    position: relative;
  }

  .budibase__nav-item:hover .dropdown-menu {
    display: block;
  }
</style>
