import React from ‘react‘
import { Redirect } from ‘react-router‘
import { savePost } from ‘./api‘

function Editor({ user }) {
  const [isSaving, setIsSaving] = React.useState(false)
  const [redirect, setRedirect] = React.useState(false)
  const [error, setError] = React.useState(null)
  function handleSubmit(e) {
    e.preventDefault()
    const { title, content, tags } = e.target.elements
    const newPost = {
      title: title.value,
      content: content.value,
      tags: tags.value.split(‘,‘).map((t) => t.trim()),
      authorId: user.id,
    }
    setIsSaving(true)
    savePost(newPost).then(
      () => setRedirect(true),
      (error) => {
        setIsSaving(false)
        setError(error.data.error)
      },
    )
  }
  if (redirect) {
    return <Redirect to="/" />
  }
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title-input">Title</label>
      <input id="title-input" name="title" />

      <label htmlFor="content-input">Content</label>
      <textarea id="content-input" name="content" />

      <label htmlFor="tags-input">Tags</label>
      <input id="tags-input" name="tags" />

      <button type="submit" disabled={isSaving}>
        Submit
      </button>

      {error ? <div role="alert">{error}</div> : null}
    </form>
  )
}

export { Editor }

test(‘should render an error message from the server‘, async () => {
  const testError = ‘test error‘
  mockSavePost.mockRejectedValueOnce({ data: { error: testError } })
  const fakeUser = userBuilder()
  const { getByText, findByRole } = render(<Editor user={fakeUser} />)
  const submitButton = getByText(/submit/i)

  fireEvent.click(submitButton)
  const postError = await findByRole(‘alert‘)
  expect(postError).toHaveTextContent(testError)
  expect(submitButton).not.toBeDisabled()
})