<template>
  <BModal 
      id="modal-center" 
      v-model="activeModal" 
      centered 
      title="latienda.coop" 
      :ok-variant="modalColor"> {{ modalText }}
  </BModal>
  <form class="form" @submit.prevent="submitCompany">
    <FormHeader title="general" />
    <p class="help-text">
      Estos son los datos básicos de la cooperativa. Procura completar el mayor
      número de campos posible.
    </p>
    <fieldset class="fieldset fieldset-general">
      <div class="cont">
        <FormInput 
          v-model="form.cif" 
          :value="form.cif ? form.cif : ''"
          type="text" 
          label-text="C.I.F." 
          @input="form.cif = $event" 
          />
        <FormInput
          v-model="form.company_name"
          :value="form.company_name ? form.company_name : ''"
          type="text"
          label-text="Nombre de la cooperativa"
          @input="form.company_name = $event"
        />
      </div>
      <div class="cont">
        <FormInput
          v-model="form.short_name"
          :value="form.short_name ? form.short_name : ''"
          type="text"
          label-text="Nombre corto"
          @input="form.short_name = $event"
        />
        <FormInput
          v-model="form.web_link"
          :value="form.web_link ? form.web_link : ''"
          type="text"
          label-text="Sitio web"
          @input="form.web_link = $event"
        />
        <small v-if="!isValid(form.shop_link)" class="error"
          >La url no es válida</small
        >
      </div>
      <div class="cont">
        <FormInput
          v-model="form.email"
          :value="form.email ? form.email : ''"
          type="text"
          label-text="Email"
          @input="form.email = $event"
        />
        <FormInput
          v-model="form.phone"
          :value="form.phone ? form.phone : ''"
          type="text"
          label-text="Teléfono"
          @input="form.phone = $event"
        />
      </div>
      <div class="cont">
        <FormInput
          v-model="form.mobile"
          :value="form.mobile ? form.mobile : ''"
          type="text"
          label-text="Móvil"
          @input="form.mobile = $event"
        />
        <FormInput
          v-model="form.other_phone"
          :value="form.other_phone ? form.other_phone : ''"
          type="text"
          label-text="Otro teléfono"
          @input="form.other_phone = $event"
        />
      </div>
      <div class="cont-col">
        <label for="imagen">Logo</label>
        <ClientOnly>
          <FormInputImage :image-url="form.logo" @change="handleImage($event)" />
        </ClientOnly>
      </div>
      <div class="cont-col">
        <label for="tags-basic">Palabras clave</label>
        <BFormTags
          v-model="form.tags"
          placeholder="Añade palabras clave"
          input-id="tags-basic"
        />
      </div>
      <div class="cont-col">
        <label for="">Descripción</label>
        <textarea v-model="form.description" class="textarea" type="text" />
      </div>
    </fieldset>

    <FormHeader title="tienda online" />
    <p class="help-text">
      Indica si la cooperativa dispone de tienda online. En caso afirmativo,
      indica su url y la plataforma utilizada en el seleccionable. Si utilizas
      WooCommerce, puedes indicar su API para sincronizar automáticamente todos
      los productos.
      <a href="#">Sigue estos pasos para obtener la API.</a>
    </p>
    <fieldset class="fieldset">
      <div class="cont">
        <div>
          <BFormCheckbox
            v-model="form.shop"
            label="¿Tiene tienda online?"
            class="label"
            :value="form.shop"
          >Tienda online</BFormCheckbox>
        </div>
        <FormInput
          v-model="form.shop_link"
          :value="form.shop_link ? form.shop_link : ''"
          type="text"
          label-text="Enlace a tienda online"
          @input="form.shop_link = $event"
        />
        <small v-if="!isValid(form.shop_link)" class="error" 
          >La url no es válida</small
        >
      </div>
      <div class="cont-col">
        <label for="select-shop">Plataforma</label>
        <BFormSelect id="select-shop" v-model="form.platform"  name="" >
          <option selected disabled value="">Plataforma</option>
          <option
            v-for="(category, key) in categories"
            :key="key"
            :value="category.value"
          >
            {{ category.text }}
          </option>
        </BFormSelect>
      </div>
      <div v-if="form.platform === 'WOO_COMMERCE'" class="cont-col">
        <h3>Configuración de WooCommerce</h3>
        <div class="cont">
          <FormInput
            v-model="form.credentials.secret"
            :value="form.credentials.secret ? form.credentials.secret : ''"
            type="text"
            label-text="API WooCoomerce clave secreta"
            @input="form.credentials.secret = $event"
          />
          <FormInput
            v-model="form.credentials.key"
            :value="form.credentials.key ? form.credentials.key : ''"
            type="text"
            label-text="API WooCoomerce clave pública"
            @input="form.credentials.key = $event"
          />
        </div>
      </div>
    </fieldset>

    <FormHeader title="localización" />
    <p class="help-text">
      La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
      que estén cerca de tu posición.
    </p>
    <fieldset class="fieldset">
    <!-- TODO: Arreglar este componente: -->
      <!-- <GoogleAddress :value="form.address" @added-data="getPlace" /> -->
      <br />
      <div class="cont">
        <FormInput
          v-model="form.shop_rss_feed"
          :value="form.shop_rss_feed ? form.shop_rss_feed : ''"
          type="text"
          label-text="Enlace RSS"
          @input="form.shop_rss_feed = $event"
        />
      </div>
    </fieldset>

    <FormHeader title="términos y condiciones" />
    <p class="help-text help-text-terms">
      En estos textos podrás indicar las condiciones de venta o condiciones de
      envío de la cooperativa. Si no tienes claro qué texto añadir, puedes hacer
      <a @click="loadText">click aquí para cargar un texto predefinido</a>
      que podrás editar. Ten en cuenta que al clicar se borrará el contenido de
      ambos campos.
    </p>

    <fieldset class="fieldset">
      <div class="cont-col">
        <label for="">Condiciones de venta</label>
        <textarea v-model="form.sale_terms" class="textarea" type="text" />
        <label for="">Condiciones de envío</label>
        <textarea v-model="form.shipping_terms" class="textarea" type="text" />
        <FormInput
          v-model="form.shipping_cost"
          :value="form.shipping_cost ? form.shipping_cost : ''"
          type="text"
          label-text="Gastos de envío"
          @input="form.shipping_cost = $event"
        />
      </div>
    </fieldset>
    <div align="center">
      <SubmitButton text="guardar" image-url="" />
    </div>
  </form>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
export default {
  setup() {
    const auth = useAuthStore();
    return {
      auth,
    }
  },
  data() {
    return {
      categories: [
        { text: 'WooCommerce', value: 'WOO_COMMERCE' },
        { text: 'Prestashop', value: 'PRESTASHOP' },
        { text: 'Shopify', value: 'SHOPIFY' },
      ],
      form: {
        id: null,
        cif: '',
        company_name: '',
        short_name: '',
        web_link: '',
        shop: false,
        shop_link: '',
        platform: '',
        email: '',
        logo: null,
        city: null,
        address: '',
        tags: [],
        geo: null,
        phone: '',
        credentials: { secret: '', key: '' },
        mobile: '',
        other_phone: '',
        description: '',
        shop_rss_feed: '',
        sale_terms: '',
        shipping_cost: '',
        sync: false,
      },

      default_text: {
        sale_terms: `Devoluciones - derecho de desistimiento
  
  Puedes devolver un pedido comprado a través del vendedor en el plazo de 14 días desde que se efectuó la entrega ejerciendo el derecho de desistimiento. Para cualquier otra duda puede consultar a la cooperativa que le ha vendido el producto.
  
  Garantía Legal
  
  Si el producto recibido no concuerda con la descripción o es defectuoso dentro de los 24 meses siguientes a su recepción, tiene derecho de manera gratuita a la reparación, reemplazo o reembolso del producto por parte del vendedor.`,

        shipping_terms: `Salvo que se indique lo contrario los pedidos gestionados por esta cooperativa se envían en un plazo de dos a cinco días desde la recepción del pedido. Se le avisará si su pedido sufre algún retraso o se cancela.`,
      },

      activeModal: false,
      modalText: '',
      modalColor: '',
    }
  },
  
  async mounted() {
    await this.getCompany()
  },

  methods: {
    isValid(url) {
      if (url) return /^(ftp|http|https):\/\/[^ "]+\.+[^ "]+$/.test(url)
      else return true
    },
    loadText() {
      this.form.sale_terms = this.default_text.sale_terms
      this.form.shipping_terms = this.default_text.shipping_terms
    },
    getPlace(value) {
      if (value) {
        this.form.address = value.address
        this.form.geo = value.geo
        this.form.city = value.city
      }
    },
    async getCompany() {
      const config = useRuntimeConfig()
      const data = await $fetch('my_company/', {
        baseURL: config.public.baseURL,
        method: 'GET',
        headers: {
          Authorization: `Bearer ${this.auth.access}`
        }
      })
      if (data) {
        this.form = data.company
        if (this.form.credentials === null)
          this.form.credentials = { secret: '', key: '' }
      }
    },
    async handleImage(e) {
      this.form.logo = e
    },

    parseForm() {
      const formData = new FormData()
      Object.keys(this.form).forEach((key) => {
        if ((key === 'geo') | (key === 'tags') | (key === 'credentials'))
          formData.append(key, JSON.stringify(this.form[key]))
        else if (key === 'city') formData.append(key, this.form[key])
        else if (this.form[key] || this.form[key] === '')
          formData.append(key, this.form[key])
      })

      if (typeof formData.get('logo') === 'string') {
        formData.delete('logo')
      }

      return formData
    },

    async submitCompany() {
      const formData = this.parseForm()
      console.log('Submitting company data:', formData)
      try {
        const config = useRuntimeConfig()
        await $fetch(`/companies/${this.form.id}/`, {
          baseURL: config.public.baseURL,
          method: 'PATCH',
          //TODO: review with Diego. I changed formaData with this.form
          body: this.form,
          headers: {
          Authorization: `Bearer ${this.auth.access}`
        }
        })
        this.modalText = 'Actualizado correctamente'
        this.modalColor = 'success'
        this.activeModal = true
      } catch (error) {
        this.modalText = 'Ha habido un error'
        this.modalColor = 'danger'
        this.activeModal = true
        console.error('Error al actualizar la cooperativa:', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.form {
  @include desktop {
    width: 40%;
  }
  @include tablet {
    width: 60%;
  }
  @include mobile {
    width: 90%;
  }

  .imagenInput {
    font-size: $s;
  }

  label, .label {
    text-align: left;
    color: $color-navy;
    font-weight: $bold;
    font-size: $xs;
  }

  .textarea {
    width: 100%;
    background-color: $color-grey-inputs;
    border: 1px solid $color-grey-inputs-border;
    border-radius: 4px;
    padding: 10px 5px;
    display: block;
    margin-bottom: 10px;
  }
}
.fieldset {
  margin-bottom: 70px;
  align-items: left;
}
.cont {
  display: flex;
  justify-content: space-between;

  @include mobile {
    flex-direction: column;
  }
}

.cont-col {
  margin: 15px 0;
  display: flex;
  flex-direction: column;

  h3 {
    color: $color-navy;
    font-size: $m;
    margin: 20px 0 15px 0;
  }
}
.help-text {
  text-align: left;
  font-size: $xs;
  text-align: justify;
  font-weight: $regular;
  color: $color-greylayout;
  font-family: $font-secondary;
  background-color: $color-light;
  margin-bottom: 20px;
  margin-top: -10px;

  a {
    cursor: pointer;
    text-decoration: underline;
    color: $color-greytext;
  }

  @include mobile {
    text-align: left;
  }
}
.error {
  color: crimson;
}
</style>
