import type {
  DeleteNachhilfeangebotMutation,
  DeleteNachhilfeangebotMutationVariables,
  FindNachhilfeangebotById,
} from 'types/graphql'

import { Link, routes, navigate } from '@redwoodjs/router'
import { useMutation } from '@redwoodjs/web'
import type { TypedDocumentNode } from '@redwoodjs/web'
import { toast } from '@redwoodjs/web/toast'

import {} from 'src/lib/formatters'

const DELETE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
  DeleteNachhilfeangebotMutation,
  DeleteNachhilfeangebotMutationVariables
> = gql`
  mutation DeleteNachhilfeangebotMutation($id: Int!) {
    deleteNachhilfeangebot(id: $id) {
      id
    }
  }
`

interface Props {
  nachhilfeangebot: NonNullable<FindNachhilfeangebotById['nachhilfeangebot']>
}

const Nachhilfeangebot = ({ nachhilfeangebot }: Props) => {
  const [deleteNachhilfeangebot] = useMutation(
    DELETE_NACHHILFEANGEBOT_MUTATION,
    {
      onCompleted: () => {
        toast.success('Nachhilfeangebot deleted')
        navigate(routes.nachhilfeangebote())
      },
      onError: (error) => {
        toast.error(error.message)
      },
    }
  )

  const onDeleteClick = (id: DeleteNachhilfeangebotMutationVariables['id']) => {
    if (
      confirm('Are you sure you want to delete nachhilfeangebot ' + id + '?')
    ) {
      deleteNachhilfeangebot({ variables: { id } })
    }
  }

  return (
    <>
      <div className="rw-segment">
        <header className="rw-segment-header">
          <h2 className="rw-heading rw-heading-secondary">
            Nachhilfeangebot {nachhilfeangebot.id} Detail
          </h2>
        </header>
        <table className="rw-table">
          <tbody>
            <tr>
              <th>Id</th>
              <td>{nachhilfeangebot.id}</td>
            </tr>
            <tr>
              <th>Subject</th>
              <td>{nachhilfeangebot.subject}</td>
            </tr>
            <tr>
              <th>Current class</th>
              <td>{nachhilfeangebot.currentClass}</td>
            </tr>
            <tr>
              <th>Cost</th>
              <td>{nachhilfeangebot.cost}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <nav className="rw-button-group">
        <Link
          to={routes.editNachhilfeangebot({ id: nachhilfeangebot.id })}
          className="rw-button rw-button-blue"
        >
          Edit
        </Link>
        <button
          type="button"
          className="rw-button rw-button-red"
          onClick={() => onDeleteClick(nachhilfeangebot.id)}
        >
          Delete
        </button>
      </nav>
    </>
  )
}

export default Nachhilfeangebot
