<template>
  <div class="style-selector">
    <div class="style-selector-header">
      <span class="back-arrow" @click="$emit('back')">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M11.03 4.272a.75.75 0 0 1 0 1.06L6.31 10.5H20.25a.75.75 0 0 1 0 1.5H6.31l4.72 5.168a.75.75 0 0 1-1.06 1.06l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
        </svg>
      </span>
      <h3>Verfügbare Stile</h3>
    </div>
    <div class="styles-list">
      <div
        v-for="style in styles"
        :key="style.id"
        class="style-item"
        @click="selectStyle(style)"
      >
        <img :src="'/storage/' + style.preview_image" :alt="style.title" class="style-thumbnail" />
        <div class="style-details">
          <h4>{{ style.title }}</h4>
          <p>{{ style.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';

const styles = ref([]);

const props = defineProps({
  image_id: {
    type: Number,
    required: true,
  },
});

const emits = defineEmits(['styleSelected', 'back', 'close']);

const fetchStyles = () => {
  axios.get('/api/styles')
    .then(response => {
      styles.value = response.data;
    })
    .catch(error => {
      console.error('Error fetching styles:', error);
    });
};

const selectStyle = (style) => {
  console.log('StyleSelector.vue: emitting styleSelected with image_id:', props.image_id);
  emits('styleSelected', style, props.image_id);
};

onMounted(() => {
  fetchStyles();
});
</script>

<style scoped>
.style-selector {
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-width: 100%; /* Adjusted to fit parent */
  max-height: 100%; /* Adjusted to fit parent */
  overflow: hidden;
}

.style-selector-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.style-selector-header h3 {
  margin: 0;
  color: #333;
}

.back-arrow {
  position: absolute;
  left: 5px; /* Adjusted position */
  font-size: 2em; /* Slightly larger */
  cursor: pointer;
  padding: 10px; /* Larger clickable area */
  color: var(--color-text); /* Adapt to theme */
}

.back-arrow:hover {
  color: var(--color-background); /* Adjust hover color for dark mode */
  background: var(--color-text); /* Adjust hover background for dark mode */
}

.styles-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  overflow-y: auto;
}

.style-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.style-item:hover {
  background-color: #eef;
}

.style-thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
}

.style-details h4 {
  margin: 0;
  color: #007bff;
}

.style-details p {
  margin: 5px 0 0;
  font-size: 0.9em;
  color: #666;
}
</style>