"use client";

import React, { useState } from "react";
import "./CheckoutStepForm.css";
import { Steps } from "antd";
import { Provider } from "./CheckoutStepFormContext";
import Order_Overview from "./order_Overview/Order_Overview";
import Details from "./details/Details";
import Payment from "./payment/Payment";

const { Step } = Steps;

const detailsInitialState = {
  name: "",
  age: "",
  profession: "",
};

const addressInitialState = {
  address1: "",
  address2: "",
  city: "",
};

const renderStep = (
  step,
  selectedAddressId,
  setSelectedAddressId,
  paymentValue,
  setPaymentValue,
) => {
  switch (step) {
    case 0:
      return (
        <Details
          selectedAddressId={selectedAddressId}
          setSelectedAddressId={setSelectedAddressId}
        />
      );
    case 1:
      return (
        <Payment
          selectedAddressId={selectedAddressId}
          paymentValue={paymentValue}
          setPaymentValue={setPaymentValue}
        />
      );
    case 2:
      return (
        <Order_Overview
          selectedAddressId={selectedAddressId}
          paymentValue={paymentValue}
        />
      );
    default:
      return null;
  }
};

const CheckoutStepForm = () => {
  const [selectedAddressId, setSelectedAddressId] = useState(null);
  const [paymentValue, setPaymentValue] = useState(1);
  const [details, setDetails] = useState(detailsInitialState);
  const [address, setAddress] = useState(addressInitialState);
  const [currentStep, setCurrentStep] = useState(0);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  const next = () => {
    scrollToTop();

    if (currentStep === 2) {
      setCurrentStep(0);
      setDetails(detailsInitialState);
      setAddress(addressInitialState);
      return;
    }
    setCurrentStep(currentStep + 1);
  };
  
  const prev = () => {
    scrollToTop();
    setCurrentStep(currentStep - 1);
  };
  return (
    <section className="CheckoutStepForm ">
      <Provider
        value={{ details, setDetails, next, prev, address, setAddress }}
      >
        <Steps current={currentStep}>
          <Step title={"Personal Details"} />
          <Step title={"Payment"} />
          <Step title={"Order Overview"} />
        </Steps>
        <main>
          {renderStep(
            currentStep,
            selectedAddressId,
            setSelectedAddressId,
            paymentValue,
            setPaymentValue,
          )}
        </main>
      </Provider>
    </section>
  );
};
export default CheckoutStepForm;
