import React, {useContext, useState} from 'react';
import {
    MDBCardImage, MDBContainer,
    MDBIcon,
    MDBInput,
    MDBInputGroup,
    MDBInputGroupElement,
    MDBInputGroupText, MDBRow,
    MDBTypography
} from "mdb-react-ui-kit";
import {ListItem, Radio, RadioGroup, SlideFade, Stack, UnorderedList} from "@chakra-ui/react";
import * as PropTypes from "prop-types";
import {AiOutlinePhone} from "react-icons/ai";
import {HandlePage} from "../../../lib/HnadelPagge";
import NumberFormat from "react-number-format";
import IMGAE from '../../../public/resource/Smart/coins-outline.gif'

function MDBRadio(props) {
    return null;
}

const StepThree = () => {
    const [type,setType] = useState(0)
    const {setInvestment} = 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="dollar-sign" />
                    </MDBTypography>
                </div>
                <div dir={'rtl'} className={'text-right mr-4'}>
                    <p className={'bk-med text-sm'}>
                        در حال حاضر ب چه صورتی می توانید سرمایه گذاری کنید ؟
                    </p>
                    <div className={'dana flex align-items-center text-sm'}>
                        <MDBCardImage className={'ml-2'} src={IMGAE} width={50} height={50} />
                       قیمت پایه هر سهم :  65.000.000
                        تومان
                    </div>
                </div>
                <div className={'mt-4 mb-4 flex flex-col justify-content-center'}>
                    <div className={'flex justify-content-center'}>
                        <RadioGroup onChange={setType} defaultValue={type}>
                            <Stack className={'bk-med'} direction='row'>
                                <Radio colorScheme='teal' className={'m-2'} value='1'>
                                    نقدی
                                </Radio>
                                <Radio colorScheme='teal' className={'m-2'} value='2'>
                                    اقساطی
                                </Radio>
                            </Stack>
                        </RadioGroup>
                    </div>
                    <br />
                    <br />
                  <MDBContainer>
                      <MDBInputGroup>
                          <NumberFormat
                              onValueChange={(values) => {
                                  const { formattedValue, value } = values;
                                  setInvestment(value);
                              }}
                              className={'form-control'}
                              type={'text'}
                              prefix={'تومان'}
                              thousandSeparator={true}
                              placeholder=' مبلغ سرمایه گذاری خود را به تومان  وارد کنید '
                              dir={'ltr'}
                          />
                          <MDBInputGroupText>
                              <MDBIcon fas icon="dollar-sign" />
                          </MDBInputGroupText>
                      </MDBInputGroup>
                  </MDBContainer>
                </div>
            </div>
        </SlideFade>
    );
};

export default StepThree;