<!--
// Copyright © 2020 Anticrm Platform Contributors.
// 
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// 
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
  import { createEventDispatcher, afterUpdate, onMount } from 'svelte'
  import { Action } from '../types'
  import Icon from './Icon.svelte'
  import Label from './Label.svelte'
  import ui from '../plugin'

  export let actions: Action[] = []
  export let ctx: any = undefined

  const dispatch = createEventDispatcher()
  let btns: HTMLButtonElement[] = []

  const keyDown = (ev: KeyboardEvent, n: number): void => {
    if (ev.key === 'ArrowDown') {
      if (n === btns.length - 1) btns[0].focus()
      else btns[n + 1].focus()
    }
    if (ev.key === 'ArrowUp') {
      if (n === 0) btns[btns.length - 1].focus()
      else btns[n - 1].focus()
    }
    if (ev.key === 'ArrowLeft' && ev.altKey) dispatch('update', 'left')
    if (ev.key === 'ArrowRight' && ev.altKey) dispatch('update', 'right')
  }

  afterUpdate(() => {
    dispatch('update', Date.now())
  })
  onMount(() => {
    if (btns[0]) btns[0].focus()
  })
</script>

<div class="antiPopup">
  <div class="ap-space" />
  <div class="ap-scroll">
    <div class="ap-box">
      {#if actions.length === 0}
      <div class='p-6 error-color'>
        <Label label={ui.string.NoActionsDefined}/>
      </div>
      {/if}
      {#each actions as action, i}
        <!-- svelte-ignore a11y-mouse-events-have-key-events -->
        <button
          bind:this={btns[i]}
          class="ap-menuItem flex-row-center withIcon"
          on:keydown={(evt) => keyDown(evt, i)}
          on:mouseover={(evt) => {
            evt.currentTarget.focus()
          }}
          on:click={(evt) => {
            dispatch('close')
            action.action(ctx, evt)
          }}
        >
          {#if action.icon}
            <div class="icon"><Icon icon={action.icon} size={'small'} /></div>
          {/if}
          <div class="ml-3 pr-1"><Label label={action.label} /></div>
        </button>
      {/each}
    </div>
  </div>
  <div class="ap-space" />
</div>

<style lang="scss">
  .withIcon {
    margin: 0;

    .icon { color: var(--content-color); }
    &:focus .icon { color: var(--accent-color); }
  }
</style>
