import axios from 'axios'
import { useState } from 'react'

import { API_BASE_URL } from '@/config'


export default () => {
  const [threadName, setThreadName] = useState ('')
  const [threadDescription, setThreadDescription] = useState ('')

  const submit = async () => {
    const formData = new FormData
    formData.append ('title', threadName)
    formData.append ('description', threadDescription)

    try
    {
      await axios.post (`${ API_BASE_URL }/threads`, formData)
    }
    catch
    {
      ;
    }
  }

  return (
      <form className="mb-2">
	{/* スレッド名 */}
	<div>
	  <label>スレッド名：</label>
	  <input type="text"
		 className="border border-black"
		 value={threadName}
		 onChange={ev => setThreadName (ev.target.value)} />
	</div>

	{/* スレッド説明 */}
	<div>
	  <label>スレッド説明：</label>
	  <textarea className="border border-black"
		    value={threadDescription}
		    onChange={ev => setThreadDescription (ev.target.value)} />
	</div>

	{/* 作成 */}
	<button type="button"
		onClick={submit}>
	  スレッド作成
	</button>
      </form>)
}