import { ArticleField } from '../ArticleField'
import { ImageUploadField } from '../ImageUploadField'
import { t } from '@/lib/i18n'
import type { AuthorPresentationDraft } from './types'

export function PresentationFields(params: {
  draft: AuthorPresentationDraft
  onChange: (next: AuthorPresentationDraft) => void
}): React.ReactElement {
  return (
    <div className="space-y-4">
      <AuthorNameField draft={params.draft} onChange={params.onChange} />
      <PictureField draft={params.draft} onChange={params.onChange} />
      <PresentationField draft={params.draft} onChange={params.onChange} />
      <ContentDescriptionField draft={params.draft} onChange={params.onChange} />
      <MainnetAddressField draft={params.draft} onChange={params.onChange} />
    </div>
  )
}

function PresentationField(params: { draft: AuthorPresentationDraft; onChange: (next: AuthorPresentationDraft) => void }): React.ReactElement {
  return (
    <ArticleField
      id="presentation"
      label={t('presentation.field.presentation')}
      value={params.draft.presentation}
      onChange={(value) => params.onChange({ ...params.draft, presentation: value as string })}
      required
      type="textarea"
      rows={6}
      placeholder={t('presentation.field.presentation.placeholder')}
      helpText={t('presentation.field.presentation.help')}
    />
  )
}

function ContentDescriptionField(params: {
  draft: AuthorPresentationDraft
  onChange: (next: AuthorPresentationDraft) => void
}): React.ReactElement {
  return (
    <ArticleField
      id="contentDescription"
      label={t('presentation.field.contentDescription')}
      value={params.draft.contentDescription}
      onChange={(value) => params.onChange({ ...params.draft, contentDescription: value as string })}
      required
      type="textarea"
      rows={6}
      placeholder={t('presentation.field.contentDescription.placeholder')}
      helpText={t('presentation.field.contentDescription.help')}
    />
  )
}

function MainnetAddressField(params: { draft: AuthorPresentationDraft; onChange: (next: AuthorPresentationDraft) => void }): React.ReactElement {
  return (
    <ArticleField
      id="mainnetAddress"
      label={t('presentation.field.mainnetAddress')}
      value={params.draft.mainnetAddress}
      onChange={(value) => params.onChange({ ...params.draft, mainnetAddress: value as string })}
      required
      type="text"
      placeholder={t('presentation.field.mainnetAddress.placeholder')}
      helpText={t('presentation.field.mainnetAddress.help')}
    />
  )
}

function AuthorNameField(params: { draft: AuthorPresentationDraft; onChange: (next: AuthorPresentationDraft) => void }): React.ReactElement {
  return (
    <ArticleField
      id="authorName"
      label={t('presentation.field.authorName')}
      value={params.draft.authorName}
      onChange={(value) => params.onChange({ ...params.draft, authorName: value as string })}
      required
      type="text"
      placeholder={t('presentation.field.authorName.placeholder')}
      helpText={t('presentation.field.authorName.help')}
    />
  )
}

function PictureField(params: { draft: AuthorPresentationDraft; onChange: (next: AuthorPresentationDraft) => void }): React.ReactElement {
  return <ImageUploadField id="picture" value={params.draft.pictureUrl} onChange={(url) => params.onChange({ ...params.draft, pictureUrl: url })} />
}