import React from "react"
import { SVGS } from "../assets/svgs"
import { toast } from "react-hot-toast"

export type Step = {
  title: string
  subtitle?: string
  required?: boolean
  helpText?: string
  content: React.ReactNode
  slug: string
  isCompleted: boolean
}

type Props = {
  steps: Step[]
  formState: any
  setFormState: (formState: any) => void
  onFinish: () => void
}

const StepWizard: React.FC<Props> = ({
  steps,
  formState,
  setFormState,
  onFinish,
}) => {
  const currentStep = formState.currentStep
  const index = steps.findIndex((step) => step.slug === currentStep)
  const totalSteps = steps.length

  const goNext = () => {
    const index = steps.findIndex((step) => step.slug === currentStep)
    if (steps[index].required && !steps[index].isCompleted) {
      toast.error("Please fill out all required fields!")
      return
    }
    if (index < totalSteps - 1)
      setFormState({
        ...formState,
        currentStep: steps[index + 1].slug,
      })
  }

  const goBack = () => {
    const index = steps.findIndex((step) => step.slug === currentStep)
    if (index > 0)
      setFormState({ ...formState, currentStep: steps[index - 1].slug })
  }

  console.log(index, totalSteps, steps)

  return (
    <div className="min-h-screen flex flex-col items-center justify-center  text-center px-4">
      <div className=" rounded-xl  p-8 w-full max-w-xl">
        <h5 className="text-sm text-blue-400 uppercase mb-2">
          {steps.find((step) => step.slug === currentStep)?.subtitle ||
            "Setting up your tutorial"}
        </h5>
        <h2 className="text-lg font-medium mb-6">
          <span className="text-blue-600 mr-1">{index + 1}.</span>
          {steps.find((step) => step.slug === currentStep)?.title}
        </h2>

        {steps.find((step) => step.slug === currentStep)?.helpText && (
          <div className="text-sm text-gray-500 bg-white p-2 rounded-md flex flex-row gap-2 align-center border border-gray-200 mb-4">
            <div className="text-blue-500 align-center justify-center flex bg-heavy-blue p-2 flex rounded">
              {SVGS.rigoSoftBlue}
            </div>
            <div className="flex flex-col gap-2 align-center justify-center">
              <span className="">
                {steps.find((step) => step.slug === currentStep)?.helpText}
              </span>
            </div>
          </div>
        )}
        <div className="flex justify-center mb-4 space-x-2">
          {steps.map((_, i) => (
            <span
              key={i}
              className={`h-2 w-2 rounded-full ${
                i === index ? "bg-blue-600" : "bg-gray-300"
              }`}
            />
          ))}
        </div>

        <div className="mb-6">
          {steps.find((step) => step.slug === currentStep)?.content}
        </div>

        <div className="flex justify-between">
          <button
            onClick={goBack}
            disabled={index === 0}
            className={`text-sm text-gray-500 hover:text-gray-900 disabled:opacity-40  ${
              index === 0 ? "cursor-not-allowed" : "cursor-pointer"
            }`}
          >
            ⬅ Back
          </button>
          <button
            onClick={index === totalSteps - 1 ? onFinish : goNext}
            className={`text-sm text-blue-600 hover:text-blue-800 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed p-2 rounded-md ${
              index === totalSteps - 1 ? "bg-blue-600 text-white" : ""
            }`}
          >
            {index === totalSteps - 1 ? "Finish 🚀" : "Next ➡"}
          </button>
        </div>
      </div>
    </div>
  )
}

export default StepWizard
