'use client'
import classnames from 'classnames'
import React, { ChangeEvent, use, useState } from 'react'
import Image from 'next/image'
import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import 'react-quill/dist/quill.snow.css';
import ReactQuill from 'react-quill'

const SubmitPost = () => {
  const { data: session, status } = useSession()
  const [file, setFile] = useState<any>()
  const [fileName, setFileName] = useState(null)
  const [success, setSuccess] = useState(false)
  const [title, setTitle] = useState('')
  const [prompt, setPrompt] = useState('')
  const [value, setValue] = useState('')
  const [posting, setPosting] = useState(false)

  const router = useRouter()

  const handleImageChange = (event: any) => {
    setFile(event.target.files[0])

    for (var i = 0; i < event.target.files.length; ++i) {
      var name = event.target.files.item(i).name
      setFileName(name)
    }
  }

  const handleSubmit = async (event: { preventDefault: () => void }) => {
    event.preventDefault()

    setPosting(true)

    const url = 'https://api.cloudinary.com/v1_1/setago/raw/upload'

    const formData = new FormData()
    formData.append('file', file)
    formData.append('upload_preset', 'setago')

    const res = await fetch(url, {
      method: 'POST',
      body: formData,
    })

    const fileone = await res.json()

    if (status === 'authenticated') {
    }

    const data = await fetch('/api/post', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: session?.user?.email?.toString(),
        title: title,
        content: value,
        prompt: prompt,
        imageUrl: fileone.secure_url,
      }),
    })

    if (data.status === 200) {
      setSuccess(true)
      setTitle('')
      setPrompt('')
      setValue('')
      setFileName(null)
      setPosting(false)
      //refresh page
      // window.location.reload()
      router.refresh()
    }
  }

  const handleTitleInput = (event: any) => {
    event.preventDefault()
    setTitle(event.target.value)
  }

  const handlePromptInput = (event: any) => {
    event.preventDefault()
    setPrompt(event.target.value)
  }

  function handleContentInput(event: ChangeEvent<HTMLTextAreaElement>): void {
    event.preventDefault()
    setValue(event.target.value)
  }

  return (
    <>
      <div className='border rounded-sm'>
        <div className='text-2xl font-semibold px-3 underline mt-4'>
          Make A New Post
        </div>
        <div className='text-sm px-3 text-gray-400 pb-3'>Non-Fictional Tech News, Recipes, Travel Guides etc</div>
        <form onSubmit={handleSubmit}>
          <div className='p-3'>
            <div className=''>
              <input
                type='file'
                id='upload'
                onChange={(event) => handleImageChange(event)}
                style={{ display: 'none' }}
                className='outline-0'
              />
              <label htmlFor='upload'>
                <div className='px-2 py-2 sm:py-5 border border-gray-700 bg-gray-100 rounded-xl text-gray-700 cursor-pointer w-36 sm:w-44 h-12  sm:h-16 text-center items-center'>
                  <div className='flex justify-center'>
                    <div className=''>
                      <svg
                        xmlns='http://www.w3.org/2000/svg'
                        fill='none'
                        viewBox='0 0 24 24'
                        strokeWidth={1.5}
                        stroke='currentColor'
                        className='w-6 h-6'
                      >
                        <path
                          strokeLinecap='round'
                          strokeLinejoin='round'
                          d='M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15'
                        />
                      </svg>
                    </div>
                    <div className='text-xs md:text-base px-2 mt-[6px] sm:-mt-2'>
                      <div>Select Image</div>
                      <div className='text-xs'>jpg/png</div>
                    </div>
                  </div>
                </div>
              </label>
              <div className='mx-1 mt-2 text-lg text-green-700 w-1/2 text-ellipsis overflow-hidden'>
                {fileName}
              </div>
            </div>
            <div className='mt-4'>
              <input
                className='w-4/6 lg:w-4/6 px-2 py-2 border border-gray-700 bg-gray-100 rounded-sm text-gray-700 sm:w-44 h-8 text-left items-center'
                type='text'
                value={title}
                placeholder='Title of Post'
                onChange={handleTitleInput}
                id='title'
              />
            </div>
            <div className='mt-6'>
              <ReactQuill
                theme="snow"
                onChange={setValue}
                // defaultValue={user?.bio ?? 'Bio'}
                value={value}
                placeholder='Enter content of post.  They can be non-fictional content such as tech news, recipes, travel guides etc.'
              />
            </div>
            <div className='mt-6'>
              <textarea
                className='px-3
                py-1.5
                text-base
                font-normal
                text-gray-700
                bg-gray-100 bg-clip-padding
                rounded-lg
                w-11/12 h-28 lg:w-11/12 mb-0 outline-none
                border border-gray-700
                focus:ring-gray-600 focus:border-gray-600'
                value={prompt}
                placeholder='Enter The Prompt That Generated The Image Or Post.  Optional.'
                onChange={handlePromptInput}
                id='prompt'
              />
            </div>
          </div>
          <div className='ml-5'>
            <button
              disabled={
                !file
                  ? true
                  : title.length < 3 || title.length > 100
                    ? true
                    : value.length < 12 || value.length > 50000
                      ? true
                      : false
              }
            >
              <div
                className="px-6 py-2 bg-green-600 text-white rounded-lg mt-4 ml-4 lg:ml-0 hover:border-green-700"
              >
                {posting ? 'Submitting...' : 'Submit A Post'}
              </div>
            </button>
            <div className=' text-green-700 text-md py-6'>
              {success && 'Post Submitted Successfully'}
            </div>
          </div>
        </form>
      </div>
    </>
  )
}

export default SubmitPost