import { useState } from 'react'
import { useMutation } from '@redwoodjs/web'
import { toast, Toaster } from '@redwoodjs/web/toast'

const SEND_EMAIL_MUTATION = gql`
  mutation sendEmailMutation($email: Email!) {
    sendAllUsersEmail(input: $email) {
      accepted
    }
  }
`

const AdminEmailPage = () => {
  const [subject, setSubject] = useState('')
  const [body, setBody] = useState('')
  const [sendEmailMutation] = useMutation(SEND_EMAIL_MUTATION, {
    onCompleted: ({ sendAllUsersEmail }) => {
      toast.success(`Emails sent, ${sendAllUsersEmail?.accepted.join(', ')}`)
      setSubject('')
      setBody('')
    },
  })

  const sendEmail = () =>
    sendEmailMutation({ variables: { email: { subject, body } } })

  return (
    <div className="flex justify-center">
      <div className="max-w-7xl pt-8">
        <h2 className="" style={{ width: '46rem' }}>
          Email all users
        </h2>
        <label htmlFor="subject">Subject</label>
        <input
          name="subject"
          className="rounded border border-gray-400 px-2 w-full"
          value={subject}
          onChange={({ target }) => setSubject(target.value)}
        />
        <label htmlFor="body">Body</label>
        <textarea
          className="w-full rounded border border-gray-400 p-2"
          name="text"
          value={body}
          onChange={({ target }) => setBody(target.value)}
        ></textarea>
        <button
          className="rounded px-2 p-1 mt-4 bg-ch-purple-400 text-indigo-200"
          onClick={sendEmail}
        >
          Send
        </button>
      </div>
      <Toaster timeout={1500} />
    </div>
  )
}

export default AdminEmailPage
