<script setup lang="ts">
import { Textarea } from "@/components/ui/textarea";
import { toast } from "vue-sonner";
import { useUtmPayload } from "~/composables/useUtmPayload";
import { useApi } from "~/composables/useApi";


const props = defineProps<{
  next: () => void;
  prev: () => void;
  isNextDisabled: boolean;
  isPrevDisabled: boolean;
}>();

const projectIdea = ref("");
const loading = ref(false);
 const { t } = useI18n();
 
const isNextButtonDisabled = computed(() => {
  return loading.value || !projectIdea.value.trim();
});

async function handleSubmit() {
 
  const { post } = useApi();
  const { getUTMPayload } = useUtmPayload();
  const utm = getUTMPayload();
  const formState = useState("campaign-form");

  try {
    loading.value = true;
    const payload = {
      order_id: (formState.value as any)?.order_id,
      project_idea: projectIdea.value,
      utm: utm,
    };

    await post("contact_us_stepper?step=3", payload);
    props.next();
  } catch (err) {
    console.error(err);
    toast.error("Error submitting step");
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div>
    <h2 class="mb-2">{{ $t("stepper.step3.desc") }}</h2>

    <Textarea
      v-model="projectIdea"
      :placeholder="$t('placeholders.write_here')"
      rows="100"
      class="h-auto min-h-[350px] resize-none"
      required
    />

    <div class="mt-6 flex w-[98%] gap-4">
      <Button
        size="stepBtn"
        variant="wsPrev"
        :disabled="props.isPrevDisabled || loading"
        @click="props.prev"
        class="w-1/2"
      >
        {{ $t("buttons.prev") }}
      </Button>

      <Button
        size="stepBtn"
        :disabled="isNextButtonDisabled || loading"
        @click="handleSubmit"
        class="w-1/2"
      >
        <span v-if="loading">{{ $t("buttons.loading_send_button") }}</span>
        <span v-else>{{ $t("buttons.next") }}</span>
      </Button>
    </div>
  </div>
</template>

<style scoped></style>
