import React, { useState } from 'react'

import AppContainer from '../appContainer'
import { BsFillTelephoneFill } from 'react-icons/bs'
import { MdEmail } from 'react-icons/md'
import { FaMapMarkerAlt } from 'react-icons/fa'
import { BsWhatsapp } from 'react-icons/bs'
import { BsTwitter } from 'react-icons/bs'
import { AiOutlineInstagram } from 'react-icons/ai'
import toast, { Toaster } from 'react-hot-toast'
import { MDBRadio } from 'mdb-react-ui-kit'
import axios from 'axios'
import NumberFormat from 'react-number-format'
import { AppProduction } from '../../lib/api'

const Sales = () => {
  const [name, setName] = useState()
  const [mobileNumber, setMobileNumber] = useState('')
  const [InvestmentPrice, setInvestmentPrice] = useState('')
  const [InvestmentType, setInvestmentType] = useState('1')
  const [Loading, setLoading] = useState(false)

  const SubmitForm = () => {
    setLoading(true)
    toast.loading('در حال ثبت درخواست شما')
    axios
      .post(`${AppProduction}public/website/request`, {
        name: name,
        mobile_number: mobileNumber,
        investment_price: InvestmentPrice,
        investment_type: InvestmentType
      })
      .then(async res => {
        setLoading(false)
        toast.remove()
        toast.success('درخواست شما ثبت شد به زودی کار شناسان فروش ما به شما تماس می گیرند')
        await console.log('res', res)
      })
      .catch(async err => {
        setLoading(false)
        toast.remove()
        await toast.error(err.response.data.err)
        await console.log('err', err)
      })
  }

  return (
    <div id='callstock' className=' text-center py-8 m	'>
      <h1 className='text-[#3c3c3c] text-[28px] font-bold mt-5	 '>مشاوره خرید سهام</h1>
      <span className='text-[#656565] text-base p-2 md:text-[22px] md:p-0 font-light'>
        برای دریافت مشاوره فرم زیر را تکمیل کنید
      </span>
      <Toaster />

      <div className='bg-white shadow-lg w-10/12 mx-auto rounded-[20px] grid lg:grid-cols-9 mt-8 SALES'>
        <div className='about lg:col-span-4 '>
          <div className='bg-[#014258]  overflow-hidden rounded-[20px] h-full lg:h-[650px] m-[0.8rem] text-end'>
            <div className='addressAbout pr-8 pl-8 pt-[1.8rem]'>
              <h4 className='text-white font-bold md:text-xl	'>ارتباط با ما</h4>
              <p className='text-white font-light md:text-lg pt-[0.5rem]'>
                بعد از ارسال فرم، مشاوران سهام طی 24 ساعت با شما تماس خواهند گرفت
              </p>

              <div className='address'>
                <div className=''>
                  {/* <span className='md:text-base font-normal text-white pr-[0.5rem]	'>021 - 2842 6945</span> */}
                  <BsFillTelephoneFill className='text-[#57C5C6]  text-[0.9rem] md:text-[1.3rem]' />
                </div>

                <div className='py-4 flex align-center md:justify-end'>
                  <span className='md:text-base font-normal text-white pr-[0.5rem]	'>contact-us@miphospital.ir</span>
                  <MdEmail className='text-[#57C5C6]  text-[0.8rem] md:text-[1.3rem]' />
                </div>

                <div className='flex justify-end xl:justify-start  '>
                  <span className='md:text-base font-normal text-white pr-[0.5rem]'>
                    تهران ، شهر جدید پرند، بلوار شهیدقاسم سلیمانی، انتهای فاز 5 ،نبش بلوار رسول اکرم
                  </span>
                  <FaMapMarkerAlt className='text-[#57C5C6]   text-[2rem] md:text-[1.3rem] ' />
                </div>
              </div>
            </div>

            <div className='contentFooter  grid lg:grid-cols-5 xl:grid-cols-2'>
              <div className='Socail lg:col-span-2 xl:col-span-1 justify-center lg:justify-start text-center lg:h-[400px] items-center flex m-4'>
                <div className='socailS text-white text-[1.2rem] hover:bg-[#57C5C6]'>
                  <BsWhatsapp className='socail' />
                </div>

                <div className='socailS text-white mx-[0.5rem]  text-[1.2rem]  hover:bg-[#57C5C6]'>
                  <BsTwitter className='socail' />
                </div>

                <div className='socailS text-white text-[1.2rem] hover:bg-[#57C5C6]'>
                  <AiOutlineInstagram className='socail' />
                </div>
              </div>

              <div className='circle1 lg:col-span-3 xl:col-span-1'>
                <div className='circle2'></div>
              </div>
            </div>
          </div>
        </div>
        <div className='rightForm lg:col-span-5 p-8  '>
          <div className=''>
            <label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6]	' for='username'>
              نام و نام خانوادگی
            </label>
            <div className='text-end'>
              <input
                onChange={e => setName(e.target.value)}
                className='outline-0 bg-transparent w-11/12 text-end pt-3
               border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] '
                id='username'
                type='text'
                placeHolder=' نام و نام خانوادگی راوارد کنید'
              />
            </div>
          </div>

          <div className='mt-9'>
            <label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6]	' for='phone'>
              شماره تماس
            </label>
            <div className='text-end'>
              <input
                onChange={e => setMobileNumber(e.target.value)}
                className='outline-0 bg-transparent w-11/12 text-end pt-3
                  border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] pt-2 '
                id='phone'
                type='text'
                placeHolder='+98 912 525 4477'
              />
            </div>
          </div>

          <div className='mt-9 '>
            <label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6]	' for='money'>
              مبلغ سرمایه گذاری شما
            </label>
            <div className='text-end'>
              <NumberFormat
                onValueChange={values => {
                  const { formattedValue, value } = values
                  setInvestmentPrice(value)
                }}
                className='outline-0 bg-transparent w-11/12 text-end pt-3
                     border-b border-solid border-[#65656540] border-r-0 border-l-0 border-t-0 hover:border-[#57C5C6] '
                type={'text'}
                prefix={'تومان'}
                thousandSeparator={true}
                dir={'ltr'}
                placeHolder=' مبلغ مد نظر خود برای شروع سرمایه گذاری وارد نمایید'
              />
            </div>
          </div>

          <div className='mt-9'>
            <label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6]	' for='buyStock'>
              به چه صورت تمایل به خرید سهام دارید؟
            </label>
            <div className='text-end  flex justify-end items-center mt-3'>
              <div className="ml-5'">
                <MDBRadio
                  onClick={() => setInvestmentType(2)}
                  name='flexRadioDefault'
                  id='flexRadioDefault1'
                  label='اقساطی  '
                />
              </div>
              <div style={{ marginLeft: 20 }} className="ml-5'">
                <MDBRadio
                  onClick={() => setInvestmentType(1)}
                  name='flexRadioDefault'
                  id='flexRadioDefault2'
                  label='نقدی'
                  defaultChecked
                />
              </div>
            </div>
          </div>

          <div className='mt-[6rem] mb-2'>
            <button
              onClick={SubmitForm}
              className='py-[1rem] outline-0 border-0 px-[2rem] bg-[#014258] rounded-[10px] text-white text-[20px] font-bold	'
            >
              {!Loading ? 'ثبت درخواست' : 'در حال ثبت  درخواست'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Sales