'use client'

import { useState } from 'react';

import Layout from '@/components/layout';
import doctors from '@/data/doctors.json';
import Date from '@/components/booking/date';
import BookingPage from '@/components/booking';
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 Booking({ params: { slug } }) {

    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: false },
        codemeli: { value: '1741025645', isEdit: false },
        name: { value: 'ساغر صابری نژاد', isEdit: false }
    });

    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}
                    paddingBottom='pb-[80px]'
                >
                    <BookingPage
                        disableSide={step === 5 || step === 6}
                        isFirst={step === 0}
                        doctor={doctor}
                    >
                        {elements[step]}
                    </BookingPage>
                </Layout>
            )}
        </>
    )
}

export default Booking