<template>
  <button
    type="button"
    :class="buttonClass"
    @click="content.performAction"
  >
    {{ content.title }}
    <div
      v-if="isLink"
      class="button__icon"
    >
      <svg
        width="14"
        height="11"
        viewBox="0 0 14 11"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g
          stroke="currentColor"
          stroke-linecap="round"
          fill="none"
          fill-rule="evenodd"
        >
          <path d="M9.5.5l4 5-4 5" stroke-linejoin="round" />
          <path d="M13.5 5.5H.5" />
        </g>
      </svg>
    </div>
  </button>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue';
import { ButtonContent } from '@lightspeed/crane';

import { calculateFontColor } from '../utils/color.ts';

const props = defineProps<{
  content: ButtonContent;
  design: ButtonDesignData;
}>();

const color = computed<Color>(() => props.design.color as Color);
const fontColor = computed<string>(() => calculateFontColor(color.value.rgba));

const isLink = computed<boolean>(() => props.design.appearance === 'text-link');

const buttonClass = computed(() => ([
  'button',
  {
    small: props.design.size === 'small',
    medium: props.design.size === 'medium',
    large: props.design.size === 'large',
    outline: props.design.appearance === 'outline-button',
    solid: props.design.appearance === 'solid-button',
    link: isLink.value,
    pill: props.design.style === 'pill',
    rectangle: props.design.style === 'rectangle',
    round: props.design.style === 'round-corner',
  },
]));

const buttonStyles = computed<CSSProperties>(() => {
  const style: CSSProperties = {
    fontFamily: props.design.font,
    color: fontColor.value,
  };

  if (props.design.appearance === 'solid-button') {
    style.backgroundColor = color.value.raw;
  }

  if (props.design.appearance !== 'solid-button') {
    style.color = color.value.raw;
  }

  return style;
});
</script>

<style scoped lang="scss">
.button {
  --font-family: v-bind(buttonStyles.fontFamily);
  --background-color: v-bind(buttonStyles.backgroundColor);
  --color: v-bind(buttonStyles.color);

  padding: 0 24px;
  background-color: var(--background-color);
  font-family: var(--font-family);
  font-weight: 700;
  color: var(--color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  transition: opacity .2s ease-in-out;

  &:hover {
    opacity: 0.5;

    .button__icon {
      transform: translateX(4px);
    }
  }

  &__icon {
    margin-left: 5px;
    transition: transform 0.3s ease;
  }

  &.pill {
    border-radius: 32px;
  }

  &.round {
    border-radius: 10px;
  }

  &.small {
    height: 30px;
    font-size: 12px;
  }

  &.medium {
    height: 48px;
    font-size: 16px;
  }

  &.large {
    height: 60px;
    font-size: 16px;
  }

  &.solid {
    border: none;
  }

  &.outline {
    border: 2px solid;
    background: none;
  }

  &.link {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    padding: 0;
  }
}
</style>
