<script setup lang="ts">
import { h } from 'vue';
import type { FlowNodeProperties } from './index';

import IconStart from '@/pages/aio/flow-config/assets/start.svg';
import IconFinish from '@/pages/aio/flow-config/assets/finish.svg';
import IconConfig from '@/pages/aio/flow-config/assets/config.svg';
import IconReport from '@/pages/aio/flow-config/assets/report.svg';
import IconPulse from '@/pages/aio/flow-config/assets/pulse.svg';
import IconTongue from '@/pages/aio/flow-config/assets/tongue.svg';
import IconQuestionnaire from '@/pages/aio/flow-config/assets/questionnaire.svg';

interface Props extends FlowNodeProperties {
  id: string;
  text?: string;
}

defineOptions({
  name: 'FlowNodeInlay',
});

const Icon = {
  start: IconStart,
  finish: IconFinish,
  config: IconConfig,
  report: IconReport,
  pulse: IconPulse,
  tongue: IconTongue,
  questionnaire: IconQuestionnaire,
};

const { id, icon, text, configurable } = defineProps<Props>();

const iconComponent = computed(() => (icon ? Icon[icon] : void 0));
</script>

<template>
  <div :id="id" class="node-container" :class="{ configurable }">
    <div v-if="iconComponent" class="icon-container flex flex-center">
      <component :is="h(iconComponent)" class="icon" />
    </div>
    <div v-if="text" class="text-container flex flex-center">
      <div class="text">{{ text }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$height: 40px;
$radius: 8px;
$icon: 22px;

.flex {
  display: flex;
}
.flex-center {
  justify-content: center;
  align-items: center;
}

.node-container {
  position: relative;
  width: var(--width, 120px);
  height: var(--height, $height);
  user-select: none;

  &.configurable {
    cursor: pointer;

    .text-container::after {
      content: '';
      position: absolute;
      top: 6px;
      right: 6px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #ff4d4f;
    }
  }
}

.icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--height, $height);
  height: 100%;
  border-top-left-radius: var(--radius, $radius);
  border-bottom-left-radius: var(--radius, $radius);
  background-color: var(--icon-background, v-bind(iconBackground));

  & + .text-container {
    padding-left: var(--height, $height);
  }

  svg {
    height: $icon;
    fill: var(--icon-color, v-bind(iconColor));
  }
}

.text-container {
  line-height: $icon;
  height: 100%;
  border-radius: var(--radius, $radius);
  background-color: #fff;
  border: 2px solid #111;

  .text {
    height: $icon;
    font-size: 14px;
  }
}
</style>
