import React, { useContext } from 'react'
import { MDBCardImage, MDBIcon, MDBTypography } from 'mdb-react-ui-kit'
import { ListItem, SlideFade, UnorderedList } from '@chakra-ui/react'
import Grow from '../../../public/resource/Smart/growing-plant-outline.webp'
import { HandlePage } from '../../../lib/HnadelPagge'
const StepFour = () => {
  const { investment } = useContext(HandlePage)
  return (
    <SlideFade in={true} offsetY='20px'>
      <div className={'flex flex-column'}>
        <div className={'mt-4'}>
          <MDBTypography
            style={{ lineHeight: 1.7 }}
            className={'text-right mr-4 text-primary-teal font-weight-bold bk-med'}
            variant={'h3'}
          >
            {' '}
            بازدهی سرمایه گذاری شما
            <MDBIcon className={'ml-2'} fas icon='chevron-up' />
          </MDBTypography>
        </div>
        <div className={'flex justify-content-center mt-2'}>
          <MDBCardImage className={'ml-2'} src={Grow} width={150} height={150} />
        </div>
        <div className={'flex justify-content-center flex-column mt-2'}>
          <div className={'flex justify-content-center'}>
            <strong className={'bg-primary-teal p-2 rounded text-white'}>
              {investment.length >= 6 ? ` ${investment}  :مبلغ سرمایه شما ` : 'مبلغ وارد شده معتر نمی باشد'}
            </strong>
          </div>
          {investment.length >= 6 ? (
            <div>
              <div className={'flex justify-content-center mt-2'}>
                {investment / 75000000 >= 1 ? (
                  <div dir={'rtl'} className={'bk-light mt-2'}>
                    <div className={'text-center'}>
                      تعداد سهام قابل خرید شما:{' '}
                      <strong className={'mr-2'}>{Math.ceil(investment / 75000000)} سهم </strong>{' '}
                    </div>
                    {Math.ceil(investment / 75000000) * 75000000 - investment ===
                    Math.ceil(investment / 75000000) * 75000000 ? (
                      <div>{Math.ceil(investment / 75000000)}</div>
                    ) : (
                      <div>
                        {Math.ceil(investment / 75000000) * 75000000 - investment === 0 ? (
                          ''
                        ) : (
                          <div className={'flex bg-gray-200 p-2 rounded-5 justify-content-center align-items-center'}>
                            با پرداخت {Math.ceil(investment / 75000000) * 75000000 - investment} تومان بیشتر می توانید{' '}
                            {Math.ceil(investment / 75000000)} سهم خریدار کنید
                          </div>
                        )}
                        <div className={'flex justify-content-center mt-3'}>
                          <span className={'bk-light text-sm animate-bounce'}>
                            پیش بینی ارزش افزوده هر سهم سه ماه آینده: {investment * 1 + 5000000 - investment * 1}{' '}
                          </span>
                        </div>
                      </div>
                    )}
                  </div>
                ) : (
                  <div className={'flex flex-col align-items-center justify-content-center mt-2'}>
                    <p dir={'rtl'} className={'bk-light mt-2'}>
                      قیمت هر سهم در حال حاضر 50,000,000 تومان است ، پیشنهاد ما به شما خرید اقساطی سهام است
                    </p>
                    <span className={'bk-med animate-bounce'}>
                      سود شما بعد از بهره برداری از فاز 1 : {investment * 1 + 5000000 - investment * 1}{' '}
                    </span>
                  </div>
                )}
              </div>
            </div>
          ) : (
            ''
          )}
        </div>
      </div>
    </SlideFade>
  )
}

export default StepFour