<template>
  <div class="form-component form-template">
    <div class="label h700" v-if="label">
      <div class="label-wrapper">
        <span>{{ label }}</span>
        <div class="icon small lg-medium" v-if="tooltip">
          <SpIcon name="statusInfo" />
        </div>
      </div>
      <div class="tip h800" v-if="tooltip">{{ tooltip }}</div>
    </div>
    <div class="input-container">
      <slot />
    </div>
    <div class="error-text h800" v-if="error">{{ error }}</div>
    <div class="info-text h800" v-else-if="info">{{ info }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import FormMixin from "@/mixins/FormMixin";
export default defineComponent({
  mixins: [FormMixin],
  props: {},
  setup() {},
});
</script>

<style scoped lang="scss">
.form-component {
  --background: var(--form-background-color);
  --border-color: var(--form-border-color);
  --text-color: var(--text-color-primary);
  --height: var(--form-item-height);
  --pointer-events: initial;
  --box-shadow: 0px 4px 10px rgba(0, 122, 255, 0);
  --transition: border 0.3s ease, box-shadow 0.3s ease;

  .label {
    margin-bottom: var(--form-label-margin);
    position: relative;
    display: flex;

    .label-wrapper {
      display: flex;
      align-items: center;

      .icon {
        margin-left: 4px;

        path {
          transition: fill 0.3s ease;
        }
      }

      &:hover {
        .icon {
          path {
            fill: var(--blue);
          }
        }

        & + .tip {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
    }

    .tip {
      padding: 16px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
      border-radius: 16px;
      max-width: 100%;
      background-color: var(--primary);
      position: absolute;
      left: 0;
      bottom: calc(100% + 20px);
      z-index: 1;
      opacity: 0;
      transform: scale(0.9) translateY(10%);
      transition: opacity 0.2s ease, transition 0.2s ease;
      pointer-events: none;

      &:after {
        content: "";
        position: absolute;
        left: 24px;
        top: 100%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 16px 16px 0 16px;
        border-color: var(--primary) transparent transparent transparent;
      }
    }
  }

  .input-container {
    width: 100%;
    position: relative;
    outline: none;
  }

  .error-text {
    margin-top: 4px;
    color: var(--text-color-error);
  }

  .info-text {
    margin-top: 4px;
    color: var(--text-color-secondary);
  }

  &:hover {
    --border-color: var(--form-border-color-hover);
  }

  &.disabled {
    --background: var(--form-background-color-disabled);
    --border-color: var(--form-border-color-disabled);
    --text-color: var(--text-color-secondary);
    --pointer-events: none;
  }

  &.error {
    --border-color: var(--form-border-color-error);
  }

  &.success {
    --border-color: var(--form-border-color-success);
  }

  &.active {
    --border-color: var(--form-border-color-active);
    --box-shadow: var(--form-box-shadow);
  }
}
</style>
