<script setup>
import { ref, watch } from 'vue';
import { useProjectStore } from '../stores/projectStore';
import ArtboardControls from './ArtboardControls.vue';

const projectStore = useProjectStore();
const emit = defineEmits(['open-logic-editor']);

// A local copy of the component to edit, to avoid direct mutation of the store state
const editableComponent = ref(null);

const pxProperties = ['fontSize', 'padding', 'borderWidth', 'borderRadius', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft'];

function formatStyleValue(key, value) {
  if (pxProperties.includes(key) && typeof value === 'number') {
    return `${value}px`;
  }
  return value;
}

// Watch for changes in the store's selected component
watch(() => projectStore.selectedComponent, (newVal) => {
    // Create a deep copy for editing to prevent modifying the store directly on input
    editableComponent.value = newVal ? JSON.parse(JSON.stringify(newVal)) : null;
    // When loading, ensure numbers are parsed back from "16px" to 16 for number inputs
    if (editableComponent.value && editableComponent.value.style) {
      pxProperties.forEach(prop => {
        if (typeof editableComponent.value.style[prop] === 'string' && editableComponent.value.style[prop].endsWith('px')) {
          editableComponent.value.style[prop] = parseFloat(editableComponent.value.style[prop]);
        }
      });
    }
}, { deep: true, immediate: true });

function update() {
  if (editableComponent.value) {
    const updatedComponent = JSON.parse(JSON.stringify(editableComponent.value));
    // Format style values for pixel properties
    if (updatedComponent.style) {
      pxProperties.forEach(prop => {
        if (typeof updatedComponent.style[prop] === 'number') {
          updatedComponent.style[prop] = formatStyleValue(prop, updatedComponent.style[prop]);
        }
      });
    }
    projectStore.updateComponentProperties(updatedComponent);
  }
}
</script>

<template>
  <aside class="properties-panel">
    <div v-if="projectStore.selectedComponent" class="form">
      <h3>Properties</h3>
      <div class="form-group">
        <label>ID:</label>
        <span>{{ editableComponent.id }}</span>
      </div>

      <hr>
      <h4>Layout</h4>
      <div class="form-group">
        <label for="x-position">X Position (%):</label>
        <input id="x-position" type="number" min="0" max="100" v-model.number="editableComponent.x" @input="update" />
      </div>
      <div class="form-group">
        <label for="y-position">Y Position (%):</label>
        <input id="y-position" type="number" min="0" max="100" v-model.number="editableComponent.y" @input="update" />
      </div>
      <div class="form-group">
        <label for="width">Width (%):</label>
        <input id="width" type="number" min="0" max="100" v-model.number="editableComponent.width" @input="update" />
      </div>
      <div class="form-group">
        <label for="height">Height (%):</label>
        <input id="height" type="number" min="0" max="100" v-model.number="editableComponent.height" @input="update" />
      </div>

      <hr>
      <h4>Content</h4>
      <div v-if="'text' in editableComponent" class="form-group">
        <label for="text">Text:</label>
        <input id="text" v-model="editableComponent.text" @input="update" />
      </div>
      <div v-if="'src' in editableComponent" class="form-group">
        <label for="src">Image Source:</label>
        <input id="src" v-model="editableComponent.src" @input="update" />
      </div>

      <hr>
      <h4>Style</h4>
      <div v-if="'style' in editableComponent" class="form">
        <div class="form-group">
            <label for="bg-color">Background Color:</label>
            <input id="bg-color" type="color" v-model="editableComponent.style.backgroundColor" @input="update" />
        </div>
        <div class="form-group">
            <label for="color">Text Color:</label>
            <input id="color" type="color" v-model="editableComponent.style.color" @input="update" />
        </div>
        <div class="form-group">
            <label for="font-size">Font Size (px):</label>
            <input id="font-size" type="number" v-model.number="editableComponent.style.fontSize" @input="update" />
        </div>
        <div class="form-group">
            <label for="padding">Padding (px):</label>
            <input id="padding" type="number" v-model.number="editableComponent.style.padding" @input="update" />
        </div>

        <div class="form-group">
            <label for="border-color">Border Color:</label>
            <input id="border-color" type="color" v-model="editableComponent.style.borderColor" @input="update" />
        </div>
        <div class="form-group">
            <label for="border-style">Border Style:</label>
            <select id="border-style" v-model="editableComponent.style.borderStyle" @change="update">
                <option value="none">None</option>
                <option value="solid">Solid</option>
                <option value="dashed">Dashed</option>
                <option value="dotted">Dotted</option>
                <option value="double">Double</option>
            </select>
        </div>
        <div class="form-group">
            <label for="border-width">Border Width (px):</label>
            <input id="border-width" type="number" v-model.number="editableComponent.style.borderWidth" @input="update" />
        </div>
        <div class="form-group">
            <label for="border-radius">Border Radius (px):</label>
            <input id="border-radius" type="number" v-model.number="editableComponent.style.borderRadius" @input="update" />
        </div>

        <div class="form-group">
            <label for="margin-top">Margin Top (px):</label>
            <input id="margin-top" type="number" v-model.number="editableComponent.style.marginTop" @input="update" />
        </div>
        <div class="form-group">
            <label for="margin-right">Margin Right (px):</label>
            <input id="margin-right" type="number" v-model.number="editableComponent.style.marginRight" @input="update" />
        </div>
        <div class="form-group">
            <label for="margin-bottom">Margin Bottom (px):</label>
            <input id="margin-bottom" type="number" v-model.number="editableComponent.style.marginBottom" @input="update" />
        </div>
        <div class="form-group">
            <label for="margin-left">Margin Left (px):</label>
            <input id="margin-left" type="number" v-model.number="editableComponent.style.marginLeft" @input="update" />
        </div>
      </div>

      <hr>
      <h4>Logic</h4>
      <button class="logic-button" @click="emit('open-logic-editor')">
        Add/Edit Logic
      </button>

    </div>
    <div v-else>
      <ArtboardControls />
    </div>
  </aside>
</template>

<style scoped>
.properties-panel {
  width: 280px;
  padding: 1.5rem;
  background-color: var(--panel-color);
  border-left: 1px solid var(--border-color);
  box-sizing: border-box;
  overflow-y: auto;
}
h3, h4 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-color-darker);
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-color-darker);
}
.form-group input {
  width: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-color);
}
input[type="color"] {
  padding: 0.25rem;
  height: 40px;
}
.form-group span {
  font-family: monospace;
  color: var(--text-color-darker);
}
hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1.5rem 0;
}
.logic-button {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--accent-color);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}
.logic-button:hover {
  background-color: var(--accent-color-hover);
}
</style>
