<script setup>
import FieldProperties from "./FieldProperties.vue";
import { useFormBuilderStore } from "../store";
import { ref } from "vue";
import { t } from '@/shared/i18n';

let store = useFormBuilderStore();
</script>

<template>
  <div class="sidebar-container">
    <FieldProperties v-if="store.form.selected_field" />
    <div class="default-state" v-else>
      <div
        class="actions"
        v-if="store.form.layout.tabs.length === 1 && !store.readOnly && !store.pg?.istable"
      >
        <button
          class="new-tab-btn btn btn-default btn-xs"
          :title="t('Add new tab')"
          @click="store.addNewTab"
        >
          {{ t("Add tab") }}
        </button>
      </div>
      <div class="empty-state">
        <div>{{ t("Select a field to edit its properties.") }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background-color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 32px;
    background-color: #f3f4f6;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    cursor: pointer;

    &:not(:first-child) {
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &.active {
      background-color: #fff;
    }
  }
}

.tab-content {
  display: none;
  &.active {
    display: block;
  }
}

.default-state {
  display: flex;
  flex-direction: column;
  height: 100%;

  .actions {
    padding: 8px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .empty-state {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #9ca3af;
    padding: 20px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  font-size: 12px;
  
  &:hover {
    background-color: #f9fafb;
  }
  
  &.btn-xs {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  &.btn-default {
    background-color: #f3f4f6;
    border-color: #e5e7eb;
    
    &:hover {
      background-color: #e5e7eb;
    }
  }
}
</style>
