Forms Unavailable

<script setup lang="ts">
import { computed, ref } from 'vue';

import { EFormModel, Theme, EConnectFormThemes, ValueUpdate } from 'types';

import EHeader from '../e-header/e-header.vue';
import EFormSection from '../e-form-section/e-form-section.vue';
import EDivider from '../e-divider/e-divider.vue';
import ESubmitButton from '../e-submit-button/e-submit-button.vue';

export type Props = {
  model: EFormModel;
  submitText?: string;
  theme?: Theme | EConnectFormThemes;
};
const props = withDefaults(defineProps<Props>(), {
  submitText: 'submit',
  theme: Theme.Default
});

const emit = defineEmits<{
  (e: 'update:value', data: ValueUpdate): void;
  (e: 'submit', event: SubmitEvent): void;
}>();

const formRef = ref<HTMLFormElement>();

const formClasses = computed(() => {
  return [props.theme];
});

function emitUpdate(data: ValueUpdate): void {
  emit('update:value', data);
}
</script>

<template>
  <div class="e-form-container">
    <form
      ref="formRef"
      class="e-form"
      :class="formClasses"
    >
      <div
        v-if="model.title || model.icon"
        class="e-form-header"
      >
        <e-header
          :icon="model.icon"
          :text="model.title"
        />
      </div>

      <div
        class="e-form-content"
        :class="{
          'has-dividers': model.hasDividers
        }"
      >
        <template
          v-for="(section, key) in model.sections"
          :key="key"
        >
          <e-form-section
            :model="section"
            @update:value="emitUpdate"
          />

          <e-divider
            v-if="model.hasDividers"
            :theme="section.theme"
          />
        </template>
      </div>

      <div class="e-form-footer">
        <slot name="footer">
          <div class="default-form-footer">
            <e-submit-button
              :form="formRef"
              :text="submitText"
              :name="submitText"
              @submit="emit('submit', $event)"
            />
          </div>
        </slot>
      </div>
    </form>
  </div>
</template>

<style scoped lang="scss">
@mixin add-form-theme($background-color: var(--e-white)) {
  & {
    background-color: $background-color;
  }
}

.e-form {
  width: 100%;
  border-radius: 15px;
  box-shadow: 7px 7px 7px 1px var(--e-box-shadow-color);
  padding: 50px 40px 50px 40px;

  .e-form-header {
    margin: 0;
  }

  .e-form-content {
    display: flex;
    flex-direction: column;
    gap: 15px;

    .e-divider {
      margin: 0;
    }

    &.has-dividers {
      > :last-child {
        display: none;
      }
    }
  }

  .e-form-footer {
    .default-form-footer {
      display: flex;
      justify-content: flex-end;
      padding: 10px 0 0 0;
      gap: 10px;
    }
  }

  @include add-form-theme();

  &.primary {
    @include add-form-theme(var(--e-primary-blockquote-background));
  }

  &.secondary {
    @include add-form-theme(var(--e-secondary-blockquote-background));
  }

  &.accent {
    @include add-form-theme(var(--e-accent-blockquote-background));
  }

  &.violet {
    @include add-form-theme(var(--e-violet-blockquote-background));
  }

  &.red {
    @include add-form-theme(var(--e-red-blockquote-background));
  }

  &.gray {
    @include add-form-theme(var(--e-gray-blockquote-background));
  }
}
</style>