import { CheckboxField, InputField } from '../components/Inputs'
import { ProfileSection } from '../components/ProfileSection'
import { useAppSelector } from '../hooks'
import '../styles/innerPage.css'
import '../styles/styles.css'
import '../styles/write.css'

export const WritePage = () => {
  const userState = useAppSelector((state) => state.user)

  return (
    <div className='InnerBodyMain'>
      <div className='ContainerMain'>
        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
          <div className='IBMSMSplitMain'>
            <div className='IBMSMSplitMainBigSide'>
              <div className='IBMSMTitleMain'>
                <h2 className='IBMSMTitleMainHeading'>
                  Write a blog post (WIP)
                </h2>
              </div>
              <div className='IBMSMSMBS_Write'>
                <InputField
                  label='Title'
                  placeholder=''
                  name='title'
                  value=''
                  onChange={() => {}}
                />
                <InputField
                  label='Body'
                  placeholder=''
                  name='body'
                  value=''
                  onChange={() => {}}
                />
                <InputField
                  label='Featured Image URL'
                  placeholder=''
                  name='imageUrl'
                  inputMode='url'
                  value=''
                  onChange={() => {}}
                />
                <InputField
                  label='Summary'
                  placeholder=''
                  name='summary'
                  type='textarea'
                  value=''
                  onChange={() => {}}
                />
                <CheckboxField
                  label='This mod not safe for work (NSFW)'
                  name='nsfw'
                  isChecked={false}
                  handleChange={() => {}}
                  type='stylized'
                />
                <div className='IBMSMSMBS_WriteAction'>
                  <button className='btn btnMain' type='button'>
                    Publish
                  </button>
                </div>
              </div>
            </div>
            {userState.auth && userState.user?.pubkey && (
              <ProfileSection pubkey={userState.user.pubkey as string} />
            )}
          </div>
        </div>
      </div>
    </div>
  )
}