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}>
                            <div className='lg:mx-20 sm:mx-5'>
                                <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}
                            </div>




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

export default Connect;