import { useState } from 'react'
import { Form, useActionData, useNavigation } from 'react-router-dom'
import {
  CheckboxFieldUncontrolled,
  InputField,
  InputFieldUncontrolled
} from '../../components/Inputs'
import { ProfileSection } from '../../components/ProfileSection'
import { useAppSelector } from '../../hooks'
import { BlogFormErrors } from 'types'
import '../../styles/innerPage.css'
import '../../styles/styles.css'
import '../../styles/write.css'
import { LoadingSpinner } from 'components/LoadingSpinner'

export const WritePage = () => {
  const userState = useAppSelector((state) => state.user)
  const formErrors = useActionData() as BlogFormErrors
  const navigation = useNavigation()
  const title = 'Submit a blog post'

  const [content, setContent] = useState<string>('')
  const handleContentChange = (_: string, value: string) => {
    setContent(value)
  }

  return (
    <div className='InnerBodyMain'>
      <div className='ContainerMain'>
        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
          <div className='IBMSMSplitMain'>
            <div className='IBMSMSplitMainBigSide'>
              <div className='IBMSMTitleMain'>
                <h2 className='IBMSMTitleMainHeading'>{title}</h2>
              </div>
              {navigation.state === 'loading' && (
                <LoadingSpinner desc='Loading..' />
              )}
              {navigation.state === 'submitting' && (
                <LoadingSpinner desc='Publishing blog to relays' />
              )}
              <Form className='IBMSMSMBS_Write' method='post'>
                <InputFieldUncontrolled
                  label='Title'
                  name='title'
                  error={formErrors?.title}
                />
                <InputField
                  label='Content'
                  name={'content'}
                  type='richtext'
                  placeholder='Blog content'
                  value={content}
                  error={formErrors?.content}
                  onChange={handleContentChange}
                />
                <input name='content' hidden value={content} readOnly />
                <InputFieldUncontrolled
                  label='Featured Image URL'
                  name='image'
                  inputMode='url'
                  error={formErrors?.image}
                />
                <InputFieldUncontrolled
                  label='Summary'
                  name='summary'
                  type='textarea'
                  error={formErrors?.summary}
                />
                <InputFieldUncontrolled
                  label='Tags'
                  description='Separate each tag with a comma. (Example: tag1, tag2, tag3)'
                  placeholder='Tags'
                  name='tags'
                  error={formErrors?.tags}
                />
                <CheckboxFieldUncontrolled
                  label='This post is not safe for work (NSFW)'
                  name='nsfw'
                />
                <div className='IBMSMSMBS_WriteAction'>
                  <button
                    className='btn btnMain'
                    type='submit'
                    disabled={
                      navigation.state === 'loading' ||
                      navigation.state === 'submitting'
                    }
                  >
                    {navigation.state === 'submitting'
                      ? 'Publishing...'
                      : 'Publish'}
                  </button>
                </div>
              </Form>
            </div>
            {userState.auth && userState.user?.pubkey && (
              <ProfileSection pubkey={userState.user.pubkey as string} />
            )}
          </div>
        </div>
      </div>
    </div>
  )
}