<template>
  <div class="item-edit">
    <div class="flex items-start gap-4 px-6 pt-4 h-full min-h-[90vh]">
      <div class="flex flex-1 flex-col gap-4">
        <card title="Description">
          <div class="flex flex-col gap-8">
            <div class="flex gap-4">
              <input-wrapper
                  is-vertical
                  field="icon"
                  label-text="Icon *"
                  :value="form.icon"
              >
                <IconSelector id="icon" v-model="form.icon" />
              </input-wrapper>
              <input-wrapper
                  is-vertical
                  field="title"
                  :label-text="item?.title_label ? item.title_label : 'Title *'"
                  class="w-full"
                  :value="form.title"
                  :limit="100"
              >
                <input
                    v-model="form.title"
                    name="title"
                    type="text"
                    placeholder="Title"
                    :maxlength="100"
                    class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
                />
              </input-wrapper>
            </div>
            <input-wrapper
                is-vertical
                field="description"
                :label-text="item?.description_label ? item.description_label : 'Supporting Text *'"
                class="w-full mb-4"
                :value="descriptionWordCount"
                :show-count="true"
            >
              <QuillEditor v-model="form.description"/>
            </input-wrapper>
          </div>
        </card>
        <VButton v-if="form.hasOwnProperty('primary_button')" :button="form.primary_button" :sites="sites" :forms="forms"/>
      </div>
      <div class="flex w-full max-w-[356px] flex-col gap-4">
        <card title="Visibility" supporting_text="Toggle off if you'd like to hide this item">
          <VToggle v-model="form.public" name="public" label="Public" />
        </card>
      </div>
    </div>
    <slot>
      <div class="flex justify-between space-x-xsSpace pt-xsSpace gap-4 sticky bottom-0 w-full bg-gray-200 py-2 px-6">
        <a @click="close"
           class="w-[200px] py-[9px] bg-white rounded-full border border-gray-300 shadow-xs text-md font-semibold hover:bg-gray-100 text-gray-700 text-center cursor-pointer">
          Cancel
        </a>
        <a @click.prevent="save"
           class="w-full py-[9px] rounded-full shadow-xs text-md font-semibold text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
        >Save changes</a>
      </div>
    </slot>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import QuillEditor from "@/components/common/QuillEditor.vue";
import IconSelector from "@/components/common/IconSelector.vue";
import Card from "@/components/common/Card.vue";
import InputWrapper from "@/components/common/InputWrapper.vue";
import VToggle from "@/components/common/Toggle.vue";
import axios from "axios";
import VButton from "@/components/common/Button.vue";

const emit = defineEmits(["update"]);

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  saveEndpoint: {
    type: String,
    required: false,
  },
  cancelEndpoint: {
    type: String,
    required: false,
  },
  sites: {
    type: Array,
    required: true,
  },
  forms: {
    type: Array,
    required: true,
  },
});

const form = ref({
  icon: props.item.icon,
  public: props.item.public,
  title: props.item.title,
  description: props.item.description,
});

if (props.item.hasOwnProperty('primary_button')) {
  form.value.primary_button = props.item.primary_button;
}

if (props.item.hasOwnProperty('secondary_button')) {
  form.value.secondary_button = props.item.secondary_button;
}

const save = () => {
  emit("update", form.value);

  if (props.saveEndpoint) {
    axios.post(props.saveEndpoint, form.value).then((data) => {
      emit("update", data);
      if (props.cancelEndpoint) {
        // window.location.href = props.cancelEndpoint;
      }
    });

    return;
  }

  emit("update", form.value);
};

const close = () => {
  emit("close", form.value);

  if (props.cancelEndpoint) {
    window.location.href = props.cancelEndpoint;
  }
};

const descriptionWordCount = computed(() => {
  const plainText = form.value.description?.replace(/<[^>]*>/g, ' ').trim();
  const words = plainText?.split(/\s+/).filter(word => word.length > 0);
  return words?.length ?? 0;
});

</script>
