import React, {createContext, useMemo, useState} from 'react';
import {MDBBtn, MDBCard, MDBCardImage, MDBContainer, MDBTypography} from "mdb-react-ui-kit";
import Image from 'next/image'
import StepOne from "./layout/StepOne";
import {Progress, SlideFade} from "@chakra-ui/react";
import imageStepOne from '../../public/resource/Smart/headre.png'
import imageStepTwo from '../../public/resource/Smart/step-2.png'
import imageStepThree from '../../public/resource/Smart/step-3.png'
import imageStepFour from '../../public/resource/Smart/step-4.png'
import imageStepFive from '../../public/resource/Smart/step-5.png'
import StepTwo from "./layout/StepTwo";
import StepThree from "./layout/StepThree";
import StepFour from "./layout/StepFouur";
import StepFive from "./layout/StepFive";
import {HandlePage} from "../../lib/HnadelPagge";
import axios from "axios";
import {AppUrl} from "../../lib/api";
import {useRouter} from "next/router";

const SmartAdvice = () => {
    const [page, setPage] = useState(1)
    const [investment, setInvestment] = useState(1)
    const [phoneNumber, setPhoneNumber] = useState('')
    const [Loading, setLoading] = useState(false)
    const [Success, setSuccess] = useState(false)
    const value = useMemo(
        () => ({ page, setPage, investment, setInvestment, phoneNumber, setPhoneNumber }),
        [page, investment, phoneNumber]
    );
    const router = useRouter()
    const SubmitForm = () => {
        axios.post(AppUrl('contact-us'),{PhoneNumber: phoneNumber, name: 'From smart', text: 'from smart'}).then((res) => {
            setLoading(false);

            if (res.status === 200) {
                setLoading(false);
                setSuccess(true);
                router.push('/')
                alert('درخواست شما ثبت شد ')

            }
        })
    }
    return (
        <div>
            <div>
                <div className={'flex justify-content-center flex-column'}>
                    {(() => {
                        switch(page) {
                            case 1:
                                return (
                                    <SlideFade in={true}>
                                        <MDBCardImage className={'position-absolute d-flex justify-content-center w-100'}  src={imageStepOne} />
                                    </SlideFade>
                                )
                            case 2:
                                return (
                                    <SlideFade in={true}>
                                        <MDBCardImage className={'position-absolute d-flex justify-content-center w-100'}  src={imageStepTwo} />
                                    </SlideFade>
                                )
                            case 3:
                                return (
                                    <SlideFade in={true}>
                                        <MDBCardImage className={'position-absolute d-flex justify-content-center w-100'}  src={imageStepThree} />
                                    </SlideFade>
                                )
                            case 4:
                                return (
                                    <SlideFade in={true}>
                                        <MDBCardImage className={'position-absolute d-flex justify-content-center w-100'}  src={imageStepFour} />
                                    </SlideFade>
                                )
                            case 5:
                                return (
                                    <SlideFade in={true}>
                                        <MDBCardImage className={'position-absolute d-flex justify-content-center w-100'} src={imageStepFive} />
                                    </SlideFade>
                                )
                        }
                    })()}
                    <MDBCard style={{ borderTopLeftRadius: 25, borderTopRightRadius: 25, height: '75vh' }} className={'position-absolute shadow-5-soft top-60 w-100 h-90'}>
                    <div className='lg:mx-20 sm:mx-5'> 
                    <HandlePage.Provider value={value}>
                                {(() => {
                                    switch(page) {
                                        case 1:
                                            return (
                                                <SlideFade in={true}>
                                                    <StepOne />
                                                </SlideFade>
                                            )
                                        case 2:return <StepTwo />
                                        case 3:return <StepThree />
                                        case 4:return <StepFour />
                                        case 5:return <StepFive />
                                    }
                                })()}
                            </HandlePage.Provider>

                            <div className={'mt-5'}>
                                <Progress dir={'rtl'} value={page * 20} size='xs' colorScheme='teal' />
                              <div dir={'rtl'} className={'m-2 mt-2 mb-2 flex justify-content-between'}>
                                  {page !== 1 && page !== 5 ? (
                                      <MDBBtn color='link'  size={'sm'} className={'mt-2'} onClick={() => setPage(page - 1)} >مرحله قبل</MDBBtn>
                                  ): ''}
                                  {page !== 1 && page !== 5 ? (
                                      (
                                          <MDBBtn size={'sm'} className={'mt-2 bg-primary-teal'} onClick={() => setPage(page + 1)} >مرحله بعد</MDBBtn>
                                      )
                                  ): ''}
                              </div>
                                <div className={'flex justify-content-center m-2'}>
                                    {page === 5 ? (
                                        <MDBBtn onClick={SubmitForm} size={'lg'}  className={'mt-2 bk-med text-center bg-primary-teal'}>ثبت در خواست مشاوره خرید سهام  </MDBBtn>
                                    ): ''}
                                </div>
                            </div>
                        </div>
                    </MDBCard>
                </div>
                <h1>شرکت مهر ایراناین پرند</h1>
            </div>
        </div>
    );
};

export default SmartAdvice;