import Date from "./date";

// Components
import Content from "./Content";
import Layout from "@/components/layout";
import Paying from "@/components/appointment/paying";
import Detail from "@/components/appointment/detail";
import FailedPay from "@/components/appointment/failedPay";
import SuccessPay from "@/components/appointment/successPay";
import LogInPage from "@/components/register/LogInPage";
import VerificationPage from "@/components/register/verificationPage";
import LayoutRegister from "@/components/register/LayoutRegister";

function Container({
  step,
  data,
  doctor,
  setData,
  setStep,
  prevData,
  matchedCity,
  isForAnother,
  setIsForAnother,
  disabledDates,
  // Login states
  num,
  setNum,
  uuid,
  setUuid,
  isSendMsg,
  setIsSendMsg,
  // Appointment slot states
  selectedSlot,
  setSelectedSlot,
  selectedDate,
  setSelectedDate,
  appointmentId,
  setAppointmentId,
  appointmentExpiresAt,
  setAppointmentExpiresAt,
}) {
  const elements = [
    <Date
      doctor={doctor}
      setStep={setStep}
      disabledDates={disabledDates}
      setSelectedSlot={setSelectedSlot}
      setSelectedDate={setSelectedDate}
    />,
    <LogInPage
      num={num}
      setNum={setNum}
      setUuid={setUuid}
      setStep={setStep}
      setIsSendMsg={setIsSendMsg}
      matchedCity={matchedCity}
    />,
    <VerificationPage
      num={num}
      uuid={uuid}
      setStep={setStep}
      setUuid={setUuid}
      isSendMsg={isSendMsg}
      setIsSendMsg={setIsSendMsg}
      link={false}
    />,
    <Detail
      data={data}
      setStep={setStep}
      setData={setData}
      prevData={prevData}
      isForAnother={isForAnother}
      setIsForAnother={setIsForAnother}
      doctor={doctor}
      selectedSlot={selectedSlot}
      selectedDate={selectedDate}
      setAppointmentId={setAppointmentId}
      setAppointmentExpiresAt={setAppointmentExpiresAt}
    />,
    <Paying
      setStep={setStep}
      appointmentId={appointmentId}
      expiresAt={appointmentExpiresAt}
      doctor={doctor}
      data={data}
      isForAnother={isForAnother}
      selectedSlot={selectedSlot}
      selectedDate={selectedDate}
    />,
    <SuccessPay setStep={setStep} />,
    <FailedPay setStep={setStep} />,
  ];

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

export default Container;