<template>
  <div class="modal">
    <h2>New Fruit</h2>
    <form id="new-fruit" @submit.prevent="checkForm">
      <!-- name -->
      <div class="form-field">
        <label for="fruit-name">Name</label>
        <input
          id="fruit-name"
          ref="autofocus"
          type="text"
          v-model="fruit.name"
          placeholder="Ex: Banana"
          required
        />
      </div>

      <!-- image finder (with Unsplash API) -->
      <ImageUnsplash
        @getValue="url => (fruit.image = url)"
        label="Image"
        containerClass="form-field"
        placeholder="Search: strawberry, apple ..."
        :required="true"
      />

      <div class="form-group">
        <!-- taste -->
        <div class="form-field">
          <label for="fruit-taste">Taste</label>
          <input
            id="fruit-taste"
            type="text"
            v-model="fruit.taste"
            placeholder="Ex: sweet"
            required
          />
        </div>

        <!-- color -->
        <div class="form-field">
          <label for="fruit-color">Color</label>
          <input id="fruit-color" type="color" v-model="fruit.color" placeholder="Color" required />
        </div>
      </div>

      <div class="form-group">
        <!-- price -->
        <div class="form-field">
          <label for="fruit-price">Price ($)</label>
          <input
            id="fruit-price"
            type="number"
            v-model="fruit.price"
            placeholder="Ex: $13"
            required
            min="0"
          />
        </div>

        <!-- expires -->
        <div class="form-field">
          <label for="fruit-expires">Expiration Date</label>
          <input id="fruit-expires" type="date" v-model="fruit.expires" required />
        </div>
      </div>

      <!-- description -->
      <div class="form-field">
        <label for="fruit-description">Description</label>
        <textarea
          id="fruit-description"
          v-model="fruit.description"
          placeholder="Ex: malesuada pellentesque elit eget ..."
          required
        />
      </div>

      <div class="actions">
        <button class="btn btn--cancel" type="button" @click="() => $store.commit('toggleModal')">
          Cancel
        </button>
        <button class="btn btn--success" type="submit">Save</button>
      </div>
    </form>
  </div>
</template>

<script>
import ImageUnsplash from "./Form/ImageUnsplash/ImageUnsplash";

export default {
  name: "AddFruit",
  components: { ImageUnsplash },
  data() {
    return {
      fruit: {
        color: "#000000",
        isFruit: true
      }
    };
  },
  mounted() {
    this.$refs["autofocus"].focus();
    document.body.classList.add("is-overlayed");
  },
  destroyed() {
    document.body.classList.remove("is-overlayed");
  },
  methods: {
    async checkForm(e) {
      this.fruit.expires = new Date(this.fruit.expires);
      await this.$store
        .dispatch("addFruit", this.fruit)
        .then(() => this.$store.commit("toggleModal"));
      e.preventDefault();
    }
  }
};
</script>

<style lang="less">
.modal {
  position: fixed;
  top: @headerHeight;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: @color-2;
  padding: 1rem;
  z-index: 14;
  overflow-y: scroll;

  form {
    border: 2px solid @color-1;
    border-radius: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%230c9696' fill-opacity='0.35'%3E%3Cpath fill-rule='evenodd' d='M29.42 29.41c.36-.36.58-.85.58-1.4V0h-4v26H0v4h28c.55 0 1.05-.22 1.41-.58h.01zm0 29.18c.36.36.58.86.58 1.4V88h-4V62H0v-4h28c.56 0 1.05.22 1.41.58zm29.16 0c-.36.36-.58.85-.58 1.4V88h4V62h26v-4H60c-.55 0-1.05.22-1.41.58h-.01zM62 26V0h-4v28c0 .55.22 1.05.58 1.41.37.37.86.59 1.41.59H88v-4H62zM18 36c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm16-26a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 58a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 78a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zM34 4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm-8 82a2 2 0 1 1 4 0v2h-4v-2zm0-68a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V18zM66 4a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm0 72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm-48 0a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm0-72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm24-4h4v2a2 2 0 1 1-4 0V0zm0 60a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V60zm14-24c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm-28-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM36 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 68a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-34a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-12a2 2 0 1 0 0 4 6 6 0 1 1 0 12 2 2 0 1 0 0 4 10 10 0 1 0 0-20zm-64 0a2 2 0 1 1 0 4 6 6 0 1 0 0 12 2 2 0 1 1 0 4 10 10 0 1 1 0-20zm56-12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-48 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm24 32a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-4a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm36-36a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM10 44c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm56 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm8 24c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zM3 68c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm0-48c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm71 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm6 66a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 86a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-68A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm36 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: scroll;
    background-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 4px 1px #d2d2f2;
    padding: 1rem;
    margin-bottom: 1rem;

    @media screen and (min-width: @sm) {
      width: 425px;
      margin: 0 auto 2rem auto;
    }

    [type="color"] {
      height: 48px;
    }

    .form-field {
      padding: 0.75rem 1rem;
      border-radius: 4px;
      box-sizing: border-box;
      background-color: @color-2;
      margin: 1rem 0;

      label {
        display: block;
        font-weight: bold;
        margin-bottom: 0.5rem;
      }

      textarea,
      input {
        width: 100%;
        box-sizing: border-box;
        border: none;
        border-radius: 4px;
        background-color: lighten(@text-color, 70%);
        padding: 0.75rem 1rem;
        color: darken(@color-1, 20%);
      }
    }

    .form-group {
      display: flex;
      align-items: center;
      margin: 1rem 0;
      background-color: @color-2;

      .form-field {
        background-color: none;
        margin: 0;
        width: 50%;
      }
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn {
        border: none;
        border-radius: 4px;
        color: @color-2;
        padding: 0.5rem 1.35rem;
        margin: 0 0.5rem;

        &--success {
          background-color: #2ecc71;
        }

        &--cancel {
          background-color: darken(#cecece, 15%);
        }
      }
    }
  }
}
</style>
