import AppContainer from '../../appContainer'
import { BsFillTelephoneFill } from 'react-icons/bs'
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 axios from 'axios'
import { AppProduction } from '../../../lib/api'
import { useState } from 'react'
import { MDBRadio } from 'mdb-react-ui-kit'
import NumberFormat from 'react-number-format'
import Link from 'next/link'
const StockTransferContainer = () => {
  const [name, setName] = useState()
  const [mobileNumber, setMobileNumber] = useState('')
  // const [InvestmentPrice, setInvestmentPrice] = useState('0')
  const [InvestmentType, setInvestmentType] = useState('1')
  const [Loading, setLoading] = useState(false)
  const [code, setCode] = useState('1')

  const [showSuccessSubmitForm, setShowSuccessSubmitForm] = useState(false)

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

      })
      .catch(async err => {
        setLoading(false)
        toast.remove()
        await toast.error(err.response.data.err)
        await console.log('err', err)
      })
  }

  return (
    <AppContainer title={'  درخواست خرید سهام'}>
      {!showSuccessSubmitForm ? (
        <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-53457000</span>
                      <BsFillTelephoneFill className='text-[#57C5C6]  text-[0.9rem] md:text-[1.3rem]' />
                    </div>

                    <div className='flex justify-end xl:justify-start mt-4'>
                      <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='09912345678'
                  />
                </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 sm:flex-col  lg:flex-row  sm:items-end sm:gap-y-4  justify-end items-center mt-3'>
                  <div className="ml-5'">
                    <MDBRadio
                      onClick={() => setInvestmentType(3)}
                      name='flexRadioDefault'
                      id='flexRadioDefault1'
                      label='اقساطی  '
                    />
                  </div>
                  <div style={{ marginLeft: 20 }} className="ml-5'">
                    <MDBRadio
                      onClick={() => setInvestmentType(3)}
                      name='flexRadioDefault'
                      id='flexRadioDefault2'
                      label='تهاتر'
                      defaultChecked
                    />
                  </div>
                  <div style={{ marginLeft: 20 }} className="ml-5'">
                    <MDBRadio
                      onClick={() => setInvestmentType(1)}
                      name='flexRadioDefault'
                      id='flexRadioDefault2'
                      label='نقدی'
                      defaultChecked
                    />
                  </div>
                </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-[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>
      ) : (
        <div className='my-44 flex justify-center flex-col items-center'>
          <h3 className='text-green-600'>درخواست شما ثبت شد به زودی کارشناسان ما با شما تماس می گیرند</h3>
          <br />
          کد پیگیری درخواست شما :
          {code} 
          <div className='mt-[6rem] mb-2'>
            <Link href={'/stock-unit'}>
              <button className='py-[1rem] outline-0 border-0 px-[2rem] bg-[#014258] rounded-[10px] text-white text-[20px] font-bold	'>
                بازگشت به امور سهام
              </button>
            </Link>
          </div>
        </div>
      )}
    </AppContainer>
  )
}

export default StockTransferContainer