<template>

  <div class="card mt-2 ">
    <div class="card-header" :class="activeClass">
      <div class="row">
     <div class="col-11"> {{this.store.name}}</div>
      <div class="col-1 bg-secondary" @click="toggleNew">+</div>
      </div>
    </div>

    <div class="card-body" v-if="add && isActive && this.store.type === 'filestore'">
      <FileUpload></FileUpload>

    </div>


    <div class="card-body" v-if="add && isActive">
     <p> Neuen Eintrag hinzufügen</p>

      <Form @submit="submitData" :validation-schema="schema" v-slot="{ errors }">
        <div class="form-row">
          <div class="form-group col-md-8 offset-2">
            <label for="key"><strong>Schlüssel</strong></label>
            <Field
                as="input"
                name="key"
                type="text"
                class="form-control"
                id="key"
            />
            <small class="text-danger" v-if="errors.key">{{
                errors.key
              }}</small>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-8 offset-2">
            <label for="name"><strong>Name</strong></label>
            <Field
                as="input"
                name="name"
                type="text"
                class="form-control"
                id="name"
            />
            <small class="text-danger" v-if="errors.name">{{
                errors.name
              }}</small>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-8 offset-2">
            <label for="description"><strong>Beschreibung</strong></label>
            <Field
                as="input"
                name="description"
                type="textarea"
                class="form-control"
                id="description"
            />
            <small class="text-danger" v-if="errors.description">{{
                errors.description
              }}</small>
          </div>
        </div>


        <div class="form-row mt-3">
          <div class="form-group col-md-8 offset-2">
            <div class="d-grid">
              <button class="btn bg-vue">
                <span v-if="!isLoading">Speichern</span>
                <span v-else class="spinner-border spinner-border-sm"></span>
              </button>
            </div>
          </div>
        </div>
      </Form>

    </div>

  </div>


</template>

<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";
import FileUpload from "@/components/camera/parts/FileUpload";

export default {
  name: "StoreSelector",
  components: {
    FileUpload,
    Form,
    Field,
  },

  props: {
    store: {
      type: Object,
      required: true
    },
    activeStore: {
      type: String,
      required: true
    }
  },
  data() {
    const schema = yup.object().shape({
      key: yup
          .string()
          .required("Der Schlüssel wird benötigt")
          .trim()
          .matches(/^[-a-zA-Z0-9]+$/, "Erlaubte Zeichen sind a-z A-Z 0-9 und -"),
      name: yup
        .string()
        .required("Der Name ist erforderlich"),
      description: yup.string()
    });

    return {
      schema,
      add: false,
      isLoading: false,
      error:""
    }
  },
  computed: {
    activeClass() {
      if(this.activeStore === this.store.id) return ["billi-primary"];
      else return ["billi-secondary"]
    },
    isActive() {
      return this.activeStore === this.store.id;
    }
  },
  methods: {
    toggleNew() {
      this.add = !this.add;
    },
  submitData(values) {
    console.log(values);
  }

  }
}
</script>

<style scoped>

</style>