import '../styles/styles.css'

export const ModForm = () => {
  return (
    <>
      <InputField
        label='Game'
        description="Can't find the game you're looking for? Send us a DM mentioning it so we can add it."
        placeholder='The mod is for a game called...'
        name='game'
      />
      <InputField
        label='Title'
        placeholder='Return the banana mod'
        name='title'
      />
      <InputField
        label='Body'
        type='textarea'
        placeholder="Here's what this mod is all about"
        name='body'
      />
      <InputField
        label='Featured Image URL'
        description='We recommend to upload images to https://nostr.build/'
        type='text'
        inputMode='url'
        placeholder='Image URL'
        name='featuredImageUrl'
      />
      <InputField
        label='Summary'
        type='textarea'
        placeholder='This is a quick description of my mod'
        name='summary'
      />
      <CheckboxField label='This mod not safe for work (NSFW)' name='nsfw' />
      <ImageUploadField
        label='Screenshots URLs'
        description='We recommend to upload images to https://nostr.build/'
      />
      <InputField
        label='Tags'
        description='Separate each tag with a comma. (Example: tag1, tag2, tag3)'
        placeholder='Tags'
        name='tags'
      />

      <div className='inputLabelWrapperMain'>
        <div className='labelWrapperMain'>
          <label className='form-label labelMain'>Download URLs</label>
          <button className='btn btnMain btnMainAdd' type='button'>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              viewBox='-32 0 512 512'
              width='1em'
              height='1em'
              fill='currentColor'
            >
              <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
            </svg>
          </button>
        </div>
        <p className='labelDescriptionMain'>
          You can upload your game mod to Github, as an example, and keep
          updating it there. Also, its advisable that you hash your package as
          well with your nostr public key.
        </p>

        <DownloadUrlFields />
        <DownloadUrlFields />
      </div>
    </>
  )
}

interface InputFieldProps {
  label: string
  description?: string
  type?: 'text' | 'textarea'
  placeholder: string
  name: string
  inputMode?: 'url'
}

const InputField = ({
  label,
  description,
  type = 'text',
  placeholder,
  name,
  inputMode
}: InputFieldProps) => (
  <div className='inputLabelWrapperMain'>
    <label className='form-label labelMain'>{label}</label>
    {description && <p className='labelDescriptionMain'>{description}</p>}
    {type === 'textarea' ? (
      <textarea
        className='inputMain'
        placeholder={placeholder}
        name={name}
      ></textarea>
    ) : (
      <input
        type={type}
        className='inputMain'
        placeholder={placeholder}
        name={name}
        inputMode={inputMode}
      />
    )}
  </div>
)

interface CheckboxFieldProps {
  label: string
  name: string
}

const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
  <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
    <label className='form-label labelMain'>{label}</label>
    <input type='checkbox' className='CheckboxMain' name={name} />
  </div>
)

interface ImageUploadFieldProps {
  label: string
  description: string
}

const ImageUploadField = ({ label, description }: ImageUploadFieldProps) => (
  <div className='inputLabelWrapperMain'>
    <label className='form-label labelMain'>{label}</label>
    {description && <p className='labelDescriptionMain'>{description}</p>}
    <div className='inputWrapperMain'>
      <input
        type='text'
        className='inputMain'
        inputMode='url'
        placeholder='We recommend to upload images to https://nostr.build/'
      />
      <button className='btn btnMain btnMainRemove' type='button'>
        <svg
          xmlns='http://www.w3.org/2000/svg'
          viewBox='-32 0 512 512'
          width='1em'
          height='1em'
          fill='currentColor'
        >
          <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
        </svg>
      </button>
    </div>
  </div>
)

const DownloadUrlFields = () => {
  return (
    <div className='inputWrapperMainWrapper'>
      <div className='inputWrapperMain'>
        <input
          type='text'
          className='inputMain'
          inputMode='url'
          placeholder='https://...'
          value='https://github.com/'
        />
        <button className='btn btnMain btnMainRemove' type='button'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-32 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
          >
            <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
          </svg>
        </button>
      </div>
      <div className='inputWrapperMain'>
        <div className='inputWrapperMainBox'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-96 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
          >
            <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
          </svg>
        </div>
        <input
          type='text'
          className='inputMain'
          inputMode='url'
          placeholder='SHA-256 Hash'
        />
        <div className='inputWrapperMainBox'></div>
      </div>
      <div className='inputWrapperMain'>
        <div className='inputWrapperMainBox'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-96 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
          >
            <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
          </svg>
        </div>
        <input
          type='text'
          className='inputMain'
          inputMode='url'
          placeholder='Signature public key'
          value='npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r'
        />
        <div className='inputWrapperMainBox'></div>
      </div>
      <div className='inputWrapperMain'>
        <div className='inputWrapperMainBox'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-96 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
          >
            <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
          </svg>
        </div>
        <input
          type='text'
          className='inputMain'
          inputMode='url'
          placeholder='Malware scan link'
        />
        <div className='inputWrapperMainBox'></div>
      </div>
      <div className='inputWrapperMain'>
        <div className='inputWrapperMainBox'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-96 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
          >
            <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
          </svg>
        </div>
        <input
          type='text'
          className='inputMain'
          inputMode='url'
          placeholder='Mod version (1.0)'
        />
        <div className='inputWrapperMainBox'></div>
      </div>
      <div className='inputWrapperMain'>
        <div className='inputWrapperMainBox'>
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='-96 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
          >
            <path d='M320 448c0 17.67-14.31 32-32 32H64c-17.69 0-32-14.33-32-32v-384C32 46.34 46.31 32.01 64 32.01S96 46.34 96 64.01v352h192C305.7 416 320 430.3 320 448z'></path>
          </svg>
        </div>
        <input
          type='text'
          className='inputMain'
          inputMode='url'
          placeholder='Custome note/message'
        />
        <div className='inputWrapperMainBox'></div>
      </div>
    </div>
  )
}