<script setup>
import {ref} from "vue";
import Variations from "./components/Variations.vue";
import Options from "./components/Options.vue";

const props = defineProps({
  options: {
    type: Array,
    required: false,
    default: []
  },
  variants: {
    type: Array,
    required: false,
    default: []
  },
  selectedVariants: {
    type: Array,
    required: false,
    default: []
  },
  errors: {
    type: Object,
    required: false,
    default: {}
  },
  locales: {
    type: Array,
    required: false,
    default: []
  },
  currentLocale: {
    type: String,
    required: false,
    default: 'nl'
  }
});

const options = ref(props.options);
const variantsData = ref("");
</script>

<template>
  <div>
    <Options
        v-model="options"
        :currentLocale="currentLocale"
        :locales="locales"
    />

    <Variations
        v-if="options.length > 0"
        v-model="options"
        :variants="variants"
        :selectedVariants="selectedVariants"
        :currentLocale="currentLocale"
        :errors="errors"
        v-model:variantsData="variantsData"
    />

    <div class="hidden">
      <textarea name="options" class="w-full h-64" :value="JSON.stringify(options)"></textarea>
      <textarea name="variants" v-model="variantsData" class="w-full h-64"></textarea>
    </div>
  </div>
</template>