import React from 'react';
import {useState} from "react";
import {useFormik ,Form} from "formik";
import { Formik } from "formik";

import * as Yup from 'yup'
import {
    MDBInputGroup,
    MDBInputGroupText,
    MDBInputGroupElement, MDBContainer, MDBRow, MDBIcon, MDBInput, MDBBtn, MDBSpinner, MDBTypography
} from 'mdb-react-ui-kit'
import axios from "axios";
import {AppUrl} from "../../lib/api";
import {AiOutlinePhone, AiOutlineUser} from "react-icons/ai";

const Connect = () => {
    const [Loading,setLoading] = useState(false);
    const [Success,setSuccess] = useState(false);

    return (
        <>
            <Formik
                initialValues={{ name: "" ,PhoneNumber: "",text: ""}}
                onSubmit={async (values,{resetForm}) => {
                    setLoading(true);
                    const dataForm = values;
                    const SubmitForm = axios.post(AppUrl('contact-us'),dataForm).then((res) => {
                        if (res.status === 200) {
                            setLoading(false);
                            setSuccess(true);

                        }
                    })


                    resetForm({})
                }}
                validateOnChange={false}
                validateOnBlur={false}
                validationSchema={Yup.object().shape({
                    name: Yup.string().required("وارد کردن نام الزامی است."),
                    PhoneNumber : Yup.string().required('شماره تلفن الزامی است .'),
                    text : Yup.string().required('متن پیام وارد نشده  است. '),
                })}
            >
                {props => {
                    props.submitCount > 0 && (props.validateOnChange = true);
                    const {
                        values,
                        touched,
                        errors,
                        handleChange,
                        handleBlur,
                        handleSubmit,
                        handleReset
                    } = props;
                    return (
                        <form id={'contactUsform'} style={{marginTop: '25px'}} onSubmit={handleSubmit}>
                            <MDBContainer>
                                <h5 className={'right-align font-weight-bold'}>  تماس با ما و مشاوره خرید سهام  </h5>
                                <br />
                                <MDBRow>
                                    <MDBInputGroup className='mb-3' style={{width: '50%'}}>
                                        <MDBInputGroupElement
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            value={values.PhoneNumber}
                                            name="PhoneNumber"
                                            dir={'rtl'}
                                            id="PhoneNumber"
                                            placeholder='شماره تماس '
                                            type='text' />

                                        <MDBInputGroupText>
                                            <AiOutlinePhone />
                                        </MDBInputGroupText>

                                    </MDBInputGroup>

                                    <MDBInputGroup className='mb-3' style={{width: '50%'}}>
                                        <MDBInputGroupElement
                                            value={values.name}
                                            onChange={handleChange}
                                            name="name"
                                            dir={'rtl'}
                                            id="name"
                                            placeholder=' نام خود را وارد کنید  '
                                            type='text' />
                                        <MDBInputGroupText>
                                            <AiOutlineUser />
                                        </MDBInputGroupText>
                                    </MDBInputGroup>
                                    <MDBInputGroup className='mb-3' style={{width: '100%'}}>
                                        <MDBInputGroupElement
                                            name={'text'}
                                            id={'text'}
                                            value={values.text}
                                            onChange={handleChange}
                                            dir={'rtl'}
                                            className={'right-align RTL'}
                                            style={{height: '100%'}}
                                            placeholder='متن پیام  خود را وارد کنید'
                                            textarea
                                            type='text' />
                                    </MDBInputGroup>
                                </MDBRow>
                                <MDBBtn type={'submit'}>
                                    {Loading ? (
                                            <>
                                                <MDBSpinner grow size='sm' role='status' tag='span' />
                                                <span className='visually-hidden'>Loading...</span>
                                            </>
                                        ):
                                        <>
                                            ارسال
                                        </>
                                    }
                                </MDBBtn>
                                {touched.PhoneNumber && errors.PhoneNumber ? (
                                    <div className={'d-flex justify-content-end text-danger '}>
                                        {errors.PhoneNumber}
                                    </div>
                                ): null}
                                {touched.name && errors.name ? (
                                    <div className={'d-flex justify-content-end text-danger '}>
                                        {errors.name}
                                    </div>
                                ): null}
                                {touched.text && errors.text ? (
                                    <div className={'d-flex justify-content-end text-danger '}>
                                        {errors.text}
                                    </div>
                                ): null}
                                <br/>
                                {Success ? (
                                    <MDBTypography style={{direction: 'rtl',borderRadius: '6px solid',borderRight: '6px  solid #00B74A',borderLeft: 'none'}} note noteColor='success'>
                                        اطلاعات شما ارسال شد ، بعد از بررسی با شما تماس گرفته می شود .
                                    </MDBTypography>
                                ): null}
                            </MDBContainer>




                        </form>
                    );
                }}
            </Formik>
        </>
    )
};

export default Connect;