<script>
  import { automationStore } from "builderStore"
  import AutomationBlockTagline from "./AutomationBlockTagline.svelte"

  export let onSelect
  export let block
  let selected

  $: selected = $automationStore.selectedBlock?.id === block.id
  $: steps =
    $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
  $: blockIdx = steps.findIndex(step => step.id === block.id)
</script>

<div
  class={`block ${block.type} hoverable`}
  class:selected
  on:click={() => onSelect(block)}>
  <header>
    {#if block.type === 'TRIGGER'}
      <i class="ri-lightbulb-fill" />
      <span>When this happens...</span>
    {:else if block.type === 'ACTION'}
      <i class="ri-flashlight-fill" />
      <span>Do this...</span>
    {:else if block.type === 'LOGIC'}
      <i class="ri-git-branch-line" />
      <span>Only continue if...</span>
    {/if}
    <div class="label">
      {#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
    </div>
  </header>
  <hr />
  <p>
    <AutomationBlockTagline {block} />
  </p>
</div>

<style>
  .block {
    width: 360px;
    padding: 20px;
    border-radius: var(--border-radius-m);
    transition: 0.3s all ease;
    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
    background-color: var(--ink);
    font-size: 16px;
    color: var(--white);
  }
  .block.selected,
  .block:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.15);
  }

  header {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  header span {
    flex: 1 1 auto;
  }
  header .label {
    font-size: 14px;
    padding: var(--spacing-s);
    color: var(--grey-8);
    border-radius: var(--border-radius-m);
    background-color: rgba(0, 0, 0, 0.05);
  }
  header i {
    font-size: 20px;
    margin-right: 5px;
  }

  .ACTION {
    background-color: var(--white);
    color: var(--ink);
  }

  .TRIGGER {
    background-color: var(--ink);
    color: var(--white);
  }
  .TRIGGER header .label {
    background-color: var(--grey-9);
    color: var(--grey-5);
  }

  .LOGIC {
    background-color: var(--blue-light);
    color: var(--ink);
  }

  p {
    color: inherit;
    margin-bottom: 0;
  }
</style>
