"use client";

import { useState } from "react";

import Content from "./Content";
import Layout from "@/components/layout";
import doctors from "@/data/doctors.json";
import Date from "@/components/booking/date";
import RegisterPage from "@/components/register";
import Paying from "@/components/booking/paying";
import Detail from "@/components/booking/detail";
import FailedPay from "@/components/booking/failedPay";
import LogInPage from "@/components/register/LogInPage";
import SuccessPay from "@/components/booking/successPay";
import SetCodePage from "@/components/register/SetCodePage";

function BookingPage({ slug, matchedCity }) {
  const doctor = doctors.find((item) => item.id === +slug);

  const [step, setStep] = useState(0);
  const [isForAnother, setIsForAnother] = useState(false);

  const [data, setData] = useState({
    phone: { value: "09121056987", isEdit: true },
    codemeli: { value: "1741025645", isEdit: true },
    name: { value: "ساغر صابری نژاد", isEdit: true },
  });

  const elements = [
    <Date doctor={doctor} setStep={setStep} />,
    <LogInPage setIsSendMsg={false} setStep={setStep} />,
    <SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
    <Detail
      isForAnother={isForAnother}
      setIsForAnother={setIsForAnother}
      setStep={setStep}
      data={data}
      setData={setData}
    />,
    <Paying setStep={setStep} />,
    <SuccessPay setStep={setStep} />,
    <FailedPay setStep={setStep} />,
  ];

  return (
    <>
      {step === 1 || step === 2 ? (
        <RegisterPage>{elements[step]}</RegisterPage>
      ) : (
        <Layout
          title="رزرو"
          name="booking"
          disableFooter={step > 2}
          matchedCity={matchedCity}
          paddingBottom="pb-[80px]"
        >
          <Content
            disableSide={step === 5 || step === 6}
            isFirst={step === 0}
            setStep={setStep}
            doctor={doctor}
            step={step}
          >
            {elements[step]}
          </Content>
        </Layout>
      )}
    </>
  );
}

export default BookingPage;