import { NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk'
import { FALLBACK_PROFILE_IMAGE } from '../../constants'
import { useAppSelector } from 'hooks'
import { useProfile } from 'hooks/useProfile'
import { Navigate, useSubmit } from 'react-router-dom'
import { appRoutes } from 'routes'
import { useState } from 'react'
import { adjustTextareaHeight } from 'utils'
import { NotePreview } from './NotePreview'

interface NoteSubmitProps {
  initialContent?: string | undefined
}

export const NoteSubmit = ({ initialContent }: NoteSubmitProps) => {
  const userState = useAppSelector((state) => state.user)
  const profile = useProfile(userState.user?.pubkey as string | undefined, {
    cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
  })
  const [content, setContent] = useState(initialContent ?? '')
  const [nsfw, setNsfw] = useState(false)
  const [showPreview, setShowPreview] = useState(false)
  const image = profile?.image || FALLBACK_PROFILE_IMAGE

  const submit = useSubmit()

  const handleContentChange = (
    event: React.ChangeEvent<HTMLTextAreaElement>
  ) => {
    setContent(event.currentTarget.value)
    adjustTextareaHeight(event.currentTarget)
  }

  const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const formSubmit = {
      content,
      nsfw
    }
    submit(JSON.stringify(formSubmit), {
      method: 'post',
      encType: 'application/json'
    })
  }

  const handlePreviewToggle = () => {
    setShowPreview((prev) => !prev)
  }

  if (!userState.user?.pubkey) return <Navigate to={appRoutes.home} />

  return (
    <>
      <form className='feedPostsPost' onSubmit={handleFormSubmit}>
        <div className='feedPostsPostInside'>
          <div className='feedPostsPostInsideInputWrapper'>
            <div className='feedPostsPostInsidePP'>
              <div className='IBMSMSMBSSCL_CommentTopPPWrapper'>
                <div
                  className='IBMSMSMBSSCL_CommentTopPP'
                  style={{
                    background: `url(${image}) center/cover no-repeat`,
                    width: '50px',
                    height: '50px',
                    borderRadius: '8px'
                  }}
                ></div>
              </div>
            </div>
            <textarea
              id='postSocialTextarea'
              name='content'
              className='inputMain feedPostsPostInsideInput'
              placeholder='Watcha thinking about?'
              value={content}
              onChange={handleContentChange}
            />
          </div>
          {showPreview && <NotePreview content={content} />}
          <div className='feedPostsPostInsideAction'>
            <div
              className='inputLabelWrapperMain inputLabelWrapperMainAlt'
              style={{ width: 'unset' }}
            >
              <input
                type='checkbox'
                className='CheckboxMain'
                checked={nsfw}
                id='nsfw'
                name='nsfw'
                onChange={() => setNsfw((nsfw) => !nsfw)}
              />
              <label htmlFor='nsfw' className='form-label labelMain'>
                NSFW
              </label>
            </div>
            <div
              style={{ display: 'flex', flexDirection: 'row', gridGap: '10px' }}
            >
              <button
                className='btn btnMain'
                type='button'
                style={{ padding: '5px 20px', borderRadius: '8px' }}
                onClick={handlePreviewToggle}
              >
                Preview
              </button>
              <button
                className='btn btnMain'
                type='submit'
                style={{ padding: '5px 20px', borderRadius: '8px' }}
              >
                Post
              </button>
            </div>
          </div>
        </div>
      </form>
    </>
  )
}