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 StockSalesContainer = () => {
  const [name, setName] = useState()
  const [mobileNumber, setMobileNumber] = useState('')
  const [InvestmentPrice, setInvestmentPrice] = useState('0')
  const [InvestmentType, setInvestmentType] = useState('1')
  const [Loading, setLoading] = useState(false)
  const [showSuccessSubmitForm, setShowSuccessSubmitForm] = 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)
        setShowSuccessSubmitForm(true)
        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 (
    <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]  font-light'>
                 قیمت آخرین سهام معامله شده :‌250,000,000
                 تومان
            </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='تعداد سهامی که قصد فروش آن را دارید'
                    />
                  </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>
                <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 StockSalesContainer