<script setup>

import { useTemplateRef } from 'vue';
import Menu from './Menu.vue';
import Icon from './Icon.vue';
import Spinner from './Spinner.vue';

const emit = defineEmits([ 'click' ]);
const props = defineProps({
  icon: String,
  href: String,
  target: String,
  iconRight: String,
  menu: Array,
  danger: {
    type: Boolean,
    default: false
  },
  success: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  showDropdown: {
    type: Boolean,
    default: true
  }
});

const elem = useTemplateRef('elem');
const menuItem = useTemplateRef('menuItem');

function onClick(event) {
  if (props.disabled) return;

  if (props.menu) {
    if (menuItem.value.isOpen) menuItem.value.close();
    else menuItem.value.open(event, elem.value);
  } else {
    emit('click', event, elem.value);
  }
}

</script>

<template>
  <component ref="elem" :is="href ? 'a' : 'div'" class="pankow-button" role="button" type="button" :class="{ 'pankow-button-disabled': disabled }"
    @click="onClick" @keydown.enter="onClick" :href="disabled ? null : href" :target="target" tabindex="0"
    :success="success || undefined" :danger="danger || undefined">
    <Menu ref="menuItem" :model="menu" v-if="menu"></Menu>
    <Spinner v-show="loading" style="stroke: white;" :class="{ 'pankow-button-icon-with-text': $slots['default'] }"/>
    <Icon v-show="!loading && icon" :icon="icon" :class="{ 'pankow-button-icon-with-text': $slots['default'] }" />
    <slot></slot>
    <Icon v-show="menu && showDropdown" icon="fa-solid fa-chevron-down"  class="pankow-button-icon-right-with-text" />
  </component>
</template>

<style>

.pankow-button {
  font-weight: 400;
  font-size: 14px;
  color: white;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  padding: var(--pankow-input-vertial-padding) max(12px, var(--pankow-input-horizontal-padding));
  border-radius: var(--pankow-border-radius);
  text-decoration: none;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 250ms, border-color 250ms;
  min-width: 100px;
}

a.pankow-button,
a.pankow-button:visited {
  color: white;
}

.pankow-button[tool] {
  min-width: auto;
}

.pankow-button-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pankow-button-icon-with-text {
  margin-right: 7px;
}

.pankow-button-icon-right-with-text {
  padding-left: 7px;
}

.pankow-button[small] {
  font-size: 11px;
  padding: 2px 6px;
}

.pankow-button[large] {
  font-size: 24px;
  padding: 8px 16px;
}

.pankow-button[outline] {
  background: transparent;
}

.pankow-button:hover,
.pankow-button:active,
.pankow-button:focus,
.pankow-button[primary]:hover,
.pankow-button[primary]:active,
.pankow-button[primary]:focus,
.pankow-button[danger]:hover,
.pankow-button[danger]:active,
.pankow-button[danger]:focus,
.pankow-button[success]:hover,
.pankow-button[success]:active,
.pankow-button[success]:focus,
.pankow-button[secondary]:hover,
.pankow-button[secondary]:active,
.pankow-button[secondary]:focus {
  text-decoration: none;
}

/* primary  */
.pankow-button {
  background: var(--pankow-color-primary);
}

.pankow-button[outline] {
  border-color: var(--pankow-color-primary);
  color: var(--pankow-color-primary);
}

a.pankow-button[outline],
a.pankow-button[outline]:visited {
  color: var(--pankow-color-primary);
}

.pankow-button[plain] {
  border-color: transparent;
  background: transparent;
  color: var(--pankow-color-primary);
}

a.pankow-button[plain],
a.pankow-button[plain]:visited {
  color: var(--pankow-color-primary);
}

.pankow-button:hover,
.pankow-button:focus,
.pankow-button:active,
.pankow-button:visited:hover,
.pankow-button:visited:focus,
.pankow-button:visited:active,
.pankow-button[outline]:hover,
.pankow-button[outline]:focus,
.pankow-button[outline]:active,
.pankow-button[outline]:visited:hover,
.pankow-button[outline]:visited:focus,
.pankow-button[outline]:visited:active,
.pankow-button[plain]:hover {
  background: var(--pankow-color-primary-hover);
  color: white;
}

.pankow-button:active:not(.pankow-button-disabled),
.pankow-button[outline]:active:not(.pankow-button-disabled) {
  background: var(--pankow-color-primary-active);
  border-color: var(--pankow-color-primary-active);
}

/* danger */
.pankow-button[danger] {
  background: var(--pankow-color-danger);
}

.pankow-button[danger][outline] {
  background: transparent;
  border-color: var(--pankow-color-danger);
  color: var(--pankow-color-danger);
}

a.pankow-button[danger][outline],
a.pankow-button[danger][outline]:visited {
  color: var(--pankow-color-danger);
}

.pankow-button[danger][plain] {
  border-color: transparent;
  background: transparent;
  color: var(--pankow-color-danger);
}

a.pankow-button[danger][plain],
a.pankow-button[danger][plain]:visited {
  color: var(--pankow-color-danger);
}

.pankow-button[danger]:hover,
.pankow-button[danger]:focus,
.pankow-button[danger]:active,
.pankow-button[danger]:visited:hover,
.pankow-button[danger]:visited:focus,
.pankow-button[danger]:visited:active,
.pankow-button[danger][outline]:hover,
.pankow-button[danger][outline]:focus,
.pankow-button[danger][outline]:active,
.pankow-button[danger][outline]:visited:hover,
.pankow-button[danger][outline]:visited:focus,
.pankow-button[danger][outline]:visited:active,
.pankow-button[danger][plain]:hover {
  background: var(--pankow-color-danger-hover);
  color: white;
}

.pankow-button[danger]:active:not(.pankow-button-disabled),
.pankow-button[danger][outline]:active:not(.pankow-button-disabled) {
  background: var(--pankow-color-danger-active);
  border-color: var(--pankow-color-danger-active);
}

/* success */
.pankow-button[success] {
  background: var(--pankow-color-success);
}

.pankow-button[success][outline] {
  background: transparent;
  border-color: var(--pankow-color-success);
  color: var(--pankow-color-success);
}

a.pankow-button[success][outline],
a.pankow-button[success][outline]:visited {
  color: var(--pankow-color-success);
}

.pankow-button[success][plain] {
  border-color: transparent;
  background: transparent;
  color: var(--pankow-color-success);
}

a.pankow-button[success][plain],
a.pankow-button[success][plain]:visited {
  color: var(--pankow-color-success);
}

.pankow-button[success]:hover,
.pankow-button[success]:focus,
.pankow-button[success]:active,
.pankow-button[success]:visited:hover,
.pankow-button[success]:visited:focus,
.pankow-button[success]:visited:active,
.pankow-button[success][plain]:hover,
.pankow-button[success][plain]:focus,
.pankow-button[success][plain]:active,
.pankow-button[success][plain]:visited:hover,
.pankow-button[success][plain]:visited:focus,
.pankow-button[success][plain]:visited:active,
.pankow-button[success][outline]:hover {
  background: var(--pankow-color-success-hover);
  color: white;
}

.pankow-button[success]:active:not(.pankow-button-disabled),
.pankow-button[success][outline]:active:not(.pankow-button-disabled) {
  background: var(--pankow-color-success-active);
  border-color: var(--pankow-color-success-active);
}

/* secondary */
.pankow-button[secondary] {
  background: var(--pankow-color-secondary);
}

.pankow-button[secondary][outline] {
  background: transparent;
  border-color: var(--pankow-color-secondary);
  color: var(--pankow-color-secondary);
}

a.pankow-button[secondary][outline],
a.pankow-button[secondary][outline]:visited {
  color: var(--pankow-color-secondary);
}

.pankow-button[secondary][plain] {
  border-color: transparent;
  background: transparent;
  color: var(--pankow-color-secondary);
}

a.pankow-button[secondary][plain],
a.pankow-button[secondary][plain]:visited {
  color: var(--pankow-color-secondary);
}

.pankow-button[secondary]:hover,
.pankow-button[secondary]:focus,
.pankow-button[secondary]:active,
.pankow-button[secondary]:visited:hover,
.pankow-button[secondary]:visited:focus,
.pankow-button[secondary]:visited:active,
.pankow-button[secondary][plain]:hover,
.pankow-button[secondary][plain]:focus,
.pankow-button[secondary][plain]:active,
.pankow-button[secondary][plain]:visited:hover,
.pankow-button[secondary][plain]:visited:focus,
.pankow-button[secondary][plain]:visited:active,
.pankow-button[secondary][outline]:hover {
  background: var(--pankow-color-secondary-hover);
  color: white;
}

.pankow-button[secondary]:active:not(.pankow-button-disabled),
.pankow-button[secondary][outline]:active:not(.pankow-button-disabled) {
  background: var(--pankow-color-secondary-active);
  border-color: var(--pankow-color-secondary-active);
}

</style>