<template>
  <div class="card" :class="`card--${props.type.toLocaleLowerCase()}`">
    <div ref="blob" class="blob" v-show="animated" />
    <div
      ref="mainComponent"
      class="card__body"
      :class="{ animated, hasAction: !!$slots.action }"
    >
      <div class="card__body__content">
        <BmsLink class="card__body__content__link" v-if="to" :to="to">
          <slot></slot>
        </BmsLink>
        <template v-else>
          <slot></slot>
        </template>
      </div>
      <div class="card__body__action" v-if="!!$slots.action">
        <slot name="action"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { StatusType } from '@/models';
import { ref } from 'vue';
import { RouteLocationRaw } from 'vue-router';
import BmsLink from '../navigation/BmsLink.vue';

const props = withDefaults(
  defineProps<{
    animated?: boolean;
    to?: RouteLocationRaw;
    type?: StatusType;
  }>(),
  {
    animated: false,
    type: StatusType.Default,
  },
);

const blob = ref<HTMLDivElement | null>(null);
const mainComponent = ref<HTMLDivElement | null>(null);

const onMouseMove = (e: MouseEvent) => {
  if (!!props.animated && blob.value && mainComponent.value) {
    const rec = mainComponent.value.getBoundingClientRect();
    const x = e.clientX - rec.left - rec.width / 2;
    const y = e.clientY - rec.top - rec.height / 2;
    blob.value?.animate([{ transform: `translate(${x}px, ${y}px)` }], {
      duration: 300,
      fill: 'forwards',
    });
  }
};
window.addEventListener('mousemove', onMouseMove);
</script>

<style lang="scss" scoped>
.card {
  --summary-card-background-color: var(--bms-card-default-glass-background);
  --summary-card-color: var(--bms-font-color);
  --card-margin: 2px;
  border: 1px solid var(--bms-border-color);
  border-radius: var(--bms-border-radius-large);

  position: relative;
  overflow: hidden;

  &.card--information {
    --summary-card-color: var(--bms-white);
    --summary-card-background-color: var(--bms-main-100);
  }

  &.card--success {
    --summary-card-color: var(--bms-white);
    --summary-card-background-color: var(--bms-success-color);
  }

  &.card--warning {
    --summary-card-color: var(--bms-white);
    --summary-card-background-color: var(--bms-warning-color);
  }

  &.card--danger {
    --summary-card-color: var(--bms-white);
    --summary-card-background-color: var(--bms-danger-color);
  }

  --card-content-border-radius: var(--bms-border-radius-large);
  .hasAction {
    --card-content-border-radius: var(--bms-border-radius-large)
      var(--bms-border-radius-large) 0 0;
    cursor: pointer;
  }

  &__body {
    position: relative;
    min-height: 50px;
    min-width: 50px;
    margin: var(--card-margin);
    width: calc(100% - 2 * var(--card-margin));
    height: calc(100% - 2 * var(--card-margin));

    display: flex;
    justify-content: space-between;
    flex-direction: column;

    &__content {
      height: 100%;
      border-radius: var(--card-content-border-radius);
      background-color: var(--summary-card-background-color);
      backdrop-filter: blur(40px);
      color: var(--summary-card-color);

      &__link {
        color: var(--summary-card-color);
        text-decoration: none;
      }
    }

    &__action {
      border-top: 1px solid var(--bms-border-color);
      border-radius: 0 0 var(--bms-border-radius-large)
        var(--bms-border-radius-large);
      background-color: var(--bms-white);
      color: var(--bms-main-100);
      padding: 0.5em;
      cursor: pointer;
    }
  }

  .blob {
    transform: translate(10px, 10px);
    width: 60%;
    height: 60%;
    min-height: 50px;
    min-width: 50px;
    background-color: light-dark(var(--bms-main-25), var(--bms-grey-100));
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
  }
}
</style>
