<script>
  import { store, allScreens } from "builderStore"
  import { tables } from "stores/backend"
  import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
  import getTemplates from "builderStore/store/screenTemplates"

  const CONTAINER = "@budibase/standard-components/container"
  const blankScreen = "createFromScratch"
  let selectedScreens = []
  let navigationSelectionModal
  let name = ""
  let baseComponent = CONTAINER
  let templateIndex
  let draftScreen

  $: blankSelected = selectedScreens.includes(blankScreen)
  $: autoSelected = selectedScreens.length > 0 && !blankSelected

  $: templates = getTemplates($store, $tables.list)
  $: route = !route && $allScreens.length === 0 ? "*" : route
  $: {
    if (templates && templateIndex === undefined) {
      templateIndex = 0
      templateChanged(0)
    }
  }

  const templateChanged = newTemplateIndex => {
    if (newTemplateIndex === undefined) return
    draftScreen = templates[newTemplateIndex].create()
    if (draftScreen.props._instanceName) {
      name = draftScreen.props._instanceName
    }

    if (draftScreen.props._component) {
      baseComponent = draftScreen.props._component
    }

    if (draftScreen.routing) {
      route = draftScreen.routing.route
    }
  }

  /*
  const save = async () => {
    if (!route) {
      routeError = "URL is required"
    } else {
      if (routeExists(route, roleId)) {
        routeError = "This URL is already taken for this access role"
      } else {
        routeError = ""
      }
    }

    if (routeError) return false

    draftScreen.props._instanceName = name
    draftScreen.props._component = baseComponent
    draftScreen.routing = { route, roleId }

    await store.actions.screens.create(draftScreen)
    if (createLink) {
      await store.actions.components.links.save(route, name)
    }
    await store.actions.routing.fetch()

    if (templateIndex !== undefined) {
      const template = templates[templateIndex]
      analytics.captureEvent(Events.SCREEN.CREATED, {
        template: template.id || template.name,
      })
    }
  }
*/
  const toggleScreenSelection = template => {
    if (selectedScreens.includes(template.id)) {
      selectedScreens = selectedScreens.filter(screen => screen !== template.id)
    } else {
      selectedScreens = [template.id, ...selectedScreens]
    }
  }
</script>

<ModalContent
  title="Add screens"
  confirmText="Add Screens"
  cancelText="Cancel"
  onConfirm={() => navigationSelectionModal.show()}
  disabled={!selectedScreens.length}
  size="L"
>
  <Body size="XS"
    >Please select the screens you would like to add to your application.
    Autogenerated screens come with CRUD functionality.</Body
  >

  <Layout noPadding>
    <Detail size="S">Blank screen</Detail>
    <div
      class="item"
      class:selected={selectedScreens.includes(blankScreen)}
      on:click={() => toggleScreenSelection({ id: blankScreen })}
      class:disabled={autoSelected}
    >
      <div class="content">
        <Body size="S">Blank</Body>
      </div>
      <div style="color: var(--spectrum-global-color-green-600); float: right">
        {#if selectedScreens.includes(blankScreen)}
          <Icon size="S" name="CheckmarkCircleOutline" />
        {/if}
      </div>
    </div>
    <Detail size="S">Autogenerated Screens</Detail>

    {#each templates.filter(x => x.id !== blankScreen) as template}
      <div
        class:disabled={blankSelected}
        class:selected={selectedScreens.includes(template.id)}
        on:click={() => toggleScreenSelection(template)}
        class="item"
      >
        <div class="content">
          {template.name}
        </div>
        <div
          style="color: var(--spectrum-global-color-green-600); float: right"
        >
          {#if selectedScreens.includes(template.id)}
            <Icon size="S" name="CheckmarkCircleOutline" />
          {/if}
        </div>
      </div>
    {/each}
  </Layout>
</ModalContent>

<style>
  .disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  .content {
    padding-left: 10px;
    letter-spacing: 0px;
    color: #2c2c2c;
  }
  .item {
    cursor: pointer;
    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
    padding: var(--spectrum-alias-item-padding-s);
    background: var(--background);
    transition: 0.3s all;
    border: solid var(--spectrum-alias-border-color);
    border-radius: 2px;
    box-sizing: border-box;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
  }

  .item:hover,
  .selected {
    background: var(--spectrum-alias-background-color-tertiary);
  }
</style>
