<template>
  <card v-if="button" :title="button?.name ?? 'Button'" class="flex flex-col gap-4 rounded-xl px-6 py-5 mt-4" :classes="classes" :class="classes">
    <div class="flex flex-col gap-8">
      <VToggle name="show" v-model="button.show" title="Show Button" />
      <input-wrapper
          is-vertical
          field="button.label"
          label-text="Button Label *"
          class="w-full mb-4"
          :value="button.label"
          :limit="100"
      >
        <input
            v-model="button.label"
            name="button.label"
            type="text"
            placeholder="Label"
            :maxlength="100"
            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
        />
      </input-wrapper>
      <input-wrapper
          v-if="['email', 'phone'].includes(button?.type)"
          is-vertical
          :field="button?.type"
          :label-text="`${capitalize(button?.type)} *`"
          class="w-full mb-4"
          :value="button.address"
          :limit="100"
      >
        <input
            v-model="button.address"
            name="button.label"
            :type="button?.type === 'email' ? 'email' : 'tel'"
            placeholder="Label"
            :maxlength="100"
            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
        />
      </input-wrapper>
      <linked-to
          v-else
          :name="button?.name"
          v-model:type="button.type"
          v-model:url="button.url"
          v-model:openInNewTab="button.open_in_new_tab"
          :sites="sites"
          :forms="forms"
      />
    </div>
  </card>
</template>

<script setup>
import Card from "@/components/common/Card.vue";
import InputWrapper from "@/components/common/InputWrapper.vue";
import VToggle from "@/components/common/Toggle.vue";
import LinkedTo from "@/components/common/LinkedTo.vue";
import {capitalize} from "../helpers/common";

const props = defineProps({
  button: {
    type: Object,
    required: true,
  },
  sites: {
    type: Array,
    required: true,
  },
  forms: {
    type: Array,
    required: false,
    default: () => []
  },
  classes: {
    type: String,
    default: 'bg-gray-50'
  }
});
</script>