<script setup lang="ts">
import {
  Stepper,
  StepperItem,
  StepperSeparator,
  StepperTrigger,
} from "@/components/ui/stepper";
import InactiveStep from "~/components/svg/CampaignForm/InactiveStep.vue";
import ActiveStep from "@/components/svg/CampaignForm/ActiveStep.vue";
import CompleteStep from "@/components/svg/CampaignForm/CompleteStep.vue";
import FormTitle from "../campaignForm/FormTitle.vue";
import Budget from "@/components/svg/CampaignForm/Budget.vue";
import Idea from "@/components/svg/CampaignForm/Idea.vue";
import ExclamationPoint from "@/components/svg/CampaignForm/ExclamationPoint.vue";
import Calender from "@/components/svg/CampaignForm/Calender.vue";
import Star from "@/components/svg/CampaignForm/Star.vue";
import WhenCalender from "@/components/svg/CampaignForm/WhenCalender.vue";
import BioStep from "./steps/BioStep.vue";
import BudgetStep from "./steps/BudgetStep.vue";
import CalenderStep from "./steps/CalenderStep.vue";
import CompanyStep from "./steps/CompanyStep.vue";
import FeatureStep from "./steps/FeatureStep.vue";
import IdeaStep from "./steps/IdeaStep.vue";
import StartStep from "./steps/StartStep.vue";

const props = defineProps<{
  stepIndex?: number;
}>();

const emit = defineEmits<{
  (e: "update:stepIndex", value: number): void;
}>();

const internalStepIndex = ref(props.stepIndex ?? 1);

watch(
  () => props.stepIndex,
  (value) => {
    if (value && value !== internalStepIndex.value) {
      internalStepIndex.value = value;
    }
  },
);

watch(internalStepIndex, (value) => {
  emit("update:stepIndex", value);
});

const route = useRoute();
const formState = useState("campaign-form");
const { t } = useI18n();

const steps = [
  {
    step: 1,
    title: t("stepper.step1.subtitle"),
    description: t("stepper.step1.title"),
    icon: ExclamationPoint,
    component: BioStep,
  },
  {
    step: 2,
    title: t("stepper.step2.subtitle"),
    description: t("stepper.step2.title"),
    icon: ExclamationPoint,
    component: CompanyStep,
     condition: () => formState.value?.type === "company", 
  },
  {
    step: 3,
    title: t("stepper.step3.subtitle"),
    description: t("stepper.step3.title"),
    icon: Idea,
    component: IdeaStep,
  },

  {
    step: 4,
    title: t("stepper.step4.subtitle"),
    description: t("stepper.step4.title"),
    icon: Star,
    component: FeatureStep,
  },
  {
    step: 5,
    title: t("stepper.step5.subtitle"),
    description: t("stepper.step5.title"),
    icon: Budget,
    component: BudgetStep,
  },
  {
    step: 6,
    title: t("stepper.step6.subtitle"),
    description: t("stepper.step6.title"),
    icon: WhenCalender,
    component: StartStep,
  },
  {
    step: 7,
    title: t("stepper.step7.subtitle"),
    description: t("stepper.step7.title"),
    icon: Calender,
    component: CalenderStep,
  },
];

const activeSteps = computed(() =>
  steps.filter((step) => (step.condition ? step.condition() : true)),
);

function handleNext() {
  const currentIndexInActive = activeSteps.value.findIndex(
    (s) => s.step === internalStepIndex.value,
  );
  if (
    currentIndexInActive !== -1 &&
    currentIndexInActive < activeSteps.value.length - 1
  ) {
    internalStepIndex.value = activeSteps.value[currentIndexInActive + 1].step;
  }
}

function handlePrev() {
  const currentIndexInActive = activeSteps.value.findIndex(
    (s) => s.step === internalStepIndex.value,
  );
  if (currentIndexInActive > 0) {
    internalStepIndex.value = activeSteps.value[currentIndexInActive - 1].step;
  }
}

const isPrevDisabled = computed(() => {
  const currentIndexInActive = activeSteps.value.findIndex(
    (s) => s.step === internalStepIndex.value,
  );
  return currentIndexInActive <= 0;
});
</script>

<template>
  <Stepper v-model="internalStepIndex" class="flex w-full flex-col gap-2">
    <FormTitle
      :icon="steps[internalStepIndex - 1].icon"
      :title="steps[internalStepIndex - 1].description"
      :step="steps[internalStepIndex - 1].title"
    />

    <div class="mt-4 flex w-full gap-2">
      <StepperItem
        v-for="step in activeSteps"
        :key="step.step"
        :step="step.step"
        v-slot="{ state }"
        class="relative flex w-full flex-col items-center"
      >
    <StepperSeparator
          v-if="step.step !== steps[steps.length - 1].step"
          class="absolute top-5 block h-0.5 shrink-0 rounded-full bg-gray-500 group-data-[state=inactive]:bg-gray-500 group-data-[state=active]:bg-gray-500 group-data-[state=completed]:bg-[linear-gradient(90deg,#00BED7_0%,#6489E3_50%,#C853EF_100%)] ltr:right-[calc(-50%+10px)] ltr:left-[calc(50%+20px)] rtl:right-[calc(50%+20px)] rtl:left-[calc(-50%+10px)]"
        />

        <StepperTrigger as-child>
          <div
            class="z-10 cursor-default rounded-full transition-transform duration-300 group-data-[state=active]:scale-90 group-data-[state=completed]:scale-100 group-data-[state=inactive]:scale-80 [&>svg]:h-8 [&>svg]:w-8"
          >
            <CompleteStep v-if="state === 'completed'" />
            <ActiveStep v-if="state === 'active'" />
            <InactiveStep v-if="state === 'inactive'" />
          </div>
        </StepperTrigger>
      </StepperItem>
    </div>

    <Transition name="step-fade" mode="out-in" appear>
      <component
        :is="steps[internalStepIndex - 1].component"
        :key="internalStepIndex"
        class="mt-6"
        :next="handleNext"
        :prev="handlePrev"
        :isPrevDisabled="isPrevDisabled"
        :isNextDisabled="true"
      />
    </Transition>
  </Stepper>
</template>

<style scoped>
.step-fade-enter-from,
.step-fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

html[dir="rtl"] .step-fade-enter-from,
html[dir="rtl"] .step-fade-leave-to {
  transform: translateX(-30px);
}

.step-fade-enter-active,
.step-fade-leave-active {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
</style>
