<script>
  import { tables } from "stores/backend"
  import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"

  export let onConfirm
  export let onCancel

  let autoCreateModeKey = "autoCreate"
  let blankScreenModeKey = "blankScreen"

  let selectedScreenMode

  const confirmScreenSelection = async () => {
    await onConfirm(selectedScreenMode)
  }
</script>

<div>
  <ModalContent
    title="Add screens"
    confirmText="Continue"
    cancelText="Cancel"
    onConfirm={confirmScreenSelection}
    {onCancel}
    disabled={!selectedScreenMode}
    size="L"
  >
    <Layout noPadding gap="S">
      <div
        class="screen-type item"
        class:selected={selectedScreenMode == blankScreenModeKey}
        on:click={() => {
          selectedScreenMode = blankScreenModeKey
        }}
      >
        <div data-cy="blank-screen" class="content screen-type-wrap">
          <Icon name="WebPage" />
          <div class="screen-type-text">
            <Heading size="XS">Blank screen</Heading>
            <Body size="S">Add a blank screen</Body>
          </div>
        </div>
        <div
          style="color: var(--spectrum-global-color-green-600); float: right"
        >
          {#if selectedScreenMode == blankScreenModeKey}
            <div class="checkmark-spacing">
              <Icon size="S" name="CheckmarkCircle" />
            </div>
          {/if}
        </div>
      </div>

      <div
        class="screen-type item"
        class:selected={selectedScreenMode == autoCreateModeKey}
        on:click={() => {
          selectedScreenMode = autoCreateModeKey
        }}
        class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
          .length}
      >
        <div data-cy="autogenerated-screens" class="content screen-type-wrap">
          <Icon name="WebPages" />
          <div class="screen-type-text">
            <Heading size="XS">Autogenerated screens</Heading>
            <Body size="S">
              Add autogenerated screens with CRUD functionality to get a working
              app quickly! (Requires a data source)
            </Body>
          </div>
        </div>
        <div
          style="color: var(--spectrum-global-color-green-600); float: right"
        >
          {#if selectedScreenMode == autoCreateModeKey}
            <div class="checkmark-spacing">
              <Icon size="S" name="CheckmarkCircle" />
            </div>
          {/if}
        </div>
      </div>
    </Layout>
  </ModalContent>
</div>

<style>
  .screen-type.item {
    padding: var(--spectrum-alias-item-padding-xl);
  }
  .screen-type-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .disabled {
    opacity: 0.3;
    pointer-events: none;
  }
  .checkmark-spacing {
    margin-right: var(--spacing-m);
  }
  .content {
    letter-spacing: 0px;
  }
  .item {
    cursor: pointer;
    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
    padding: var(--spectrum-alias-item-padding-s);
    background: var(--spectrum-alias-background-color-secondary);
    transition: 0.3s all;
    border: 1px solid var(--spectrum-global-color-gray-300);
    border-radius: 4px;
    border-width: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item:hover,
  .selected {
    background: var(--spectrum-alias-background-color-tertiary);
  }
  .screen-type-wrap .screen-type-text {
    padding-left: var(--spectrum-alias-item-padding-xl);
  }
  .screen-type-wrap .screen-type-text :global(h1) {
    padding-bottom: var(--spacing-xs);
  }
  .screen-type-wrap :global(.spectrum-Icon) {
    min-width: var(--spectrum-icon-size-m);
  }
  .screen-type-wrap :global(.spectrum-Heading) {
    padding-bottom: var(--spectrum-alias-item-padding-s);
  }
</style>
