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'
import { Box, Button, Center, Flex, Heading, Input, Select, Textarea, Stack } from '@chakra-ui/react'
import { useForm } from 'react-hook-form'
import moment from 'moment-jalaali'

const StockSalesContainer = () => {
  const [userName, setUserName] = useState()
  const [national_code, setNational_code] = useState()
  const [mobileNumber, setMobileNumber] = useState()
  const [numberStock, setNumberStock] = useState('')
  const [stockType, setStockType] = useState(null)
  const [InvestmentType, setInvestmentType] = useState('1')
  const [code, setCode] = useState('1')


  const [InvestmentPrice, setInvestmentPrice] = useState('0')

  const [Loading, setLoading] = useState(false)
  const [showSuccessSubmitForm, setShowSuccessSubmitForm] = useState(false)
  const [textareaValue, setTextareaValue] = useState('');

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm()

  const SubmitForm = () => {
    setLoading(true)
    toast.loading('در حال ثبت درخواست شما')
    axios
      .post(`${AppProduction}public/website/request`, {
        name: userName,
        national_code: national_code,
        stock_count: numberStock,
        investment_price: InvestmentPrice,
        investment_type: InvestmentType,
        type: "buy-stock",
        stock_type: stockType,
        description: textareaValue,
        mobile_number: mobileNumber
        // name: name,
        // mobile_number: mobileNumber,
      })
      .then(async res => {
        setLoading(false)
        setShowSuccessSubmitForm(true)
        toast.remove()
        toast.success('درخواست شما ثبت شد به زودی کار شناسان  ما به شما تماس می گیرند')
        console.log('res', res.data.request)
        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>
        <div className="flex justify-center">
        <div
            className='mt-6 flex lg:w-6/12 md:w-full sm:w-full sm:mx-1 flex-col justify-center items-center gap-y-4 bg-teal-400 p-2 py-4 rounded-lg'
          >
            <span className='text-white drop-shadow-md text-right lg:text-2xl sm:text-sm  font-bold'>
              قیمت آخرین سهام معامله شده :‌250,000,000 تومان
            </span>
            <br />
            <br />
            تاریخ آخرین قیمت معامله شده : {moment().format('jYYYY/jM/jD')}
          </div>
        </div>
          <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 => setUserName(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='national_code'>
                  کد ملی
                </label>
                <div className='text-end'>
                  <input
                    onChange={e => setNational_code(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='name'
                    type='text'
                    placeHolder=' کد  ملی را وارد کنید'
                  />
                </div>
              </div>
              <div className='mt-9'>
                <label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6]	' for='national_code'>
                  شماره موبایل
                </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] '
                    id='name'
                    type='text'
                    placeHolder=' شماره موبایل وارد کنید'
                  />
                </div>
              </div>
              <div className='mt-9'>
                <label className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6]	' for='stockType'>
                  نوع سهام :
                </label>
                <Select dir={'rtl'} onChange={e => setStockType(e.target.value)}>
                  <option value=''>انتخاب کنید</option>
                  <option value='1'> عادی </option>
                  <option value='2'> تخصصی </option>
                </Select>
              </div>

              <div className='mt-9'>
                <label
                  className='text-[#3c3c3c] text-base md:text-lg font-medium hover:text-[#57C5C6]	'
                  for='numberStock'
                >
                  تعداد سهام
                </label>
                <div className='text-end'>
                  <input
                    onChange={e => setNumberStock(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 style={{ marginLeft: 20 }} className="ml-5'">
                    <MDBRadio
                      onClick={() => setInvestmentType(4)}
                      name='flexRadioDefault'
                      id='flexRadioDefault4'
                      label=' تهاتر'
                      defaultChecked
                    />
                  </div>

                  <div style={{ marginLeft: 20 }} className="ml-5'">
                    <MDBRadio
                      onClick={() => setInvestmentType(3)}
                      name='flexRadioDefault'
                      id='flexRadioDefault3'
                      label='نقد و اقساط'
                      defaultChecked
                    />
                  </div>

                  <div style={{ marginLeft: 20 }} className="ml-5'">
                    <MDBRadio
                      onClick={() => setInvestmentType(2)}
                      name='flexRadioDefault'
                      id='flexRadioDefault2'
                      label=' اقساط'
                      defaultChecked
                    />
                  </div>

                  <div className="ml-5'" style={{ marginLeft: 20 }}>
                    <MDBRadio
                      onClick={() => setInvestmentType(1)}
                      name='flexRadioDefault'
                      id='flexRadioDefault1'
                      label='نقد  '
                      defaultChecked
                    />
                  </div>
                </div>
              </div>

              <div className='mt-2'>
                {InvestmentType === 4 && (
                  <Textarea 
                  value={textareaValue}
                  onChange={(e) => {
                    setTextareaValue(e.target.value)
                  }}

                  style={{ textAlign: 'right' }} placeholder='....شرح مال مورد معوض' size='sm' />
                )}
              </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 StockSalesContainer