import { CopyInput } from './form'
import { gql, useMutation } from '@apollo/client'
import { INVITE_FIELDS } from '../fragments/invites'
import styles from '../styles/invites.module.css'

export default function Invite ({ invite, active }) {
  const [revokeInvite] = useMutation(
    gql`
      ${INVITE_FIELDS}
      mutation revokeInvite($id: ID!) {
        revokeInvite(id: $id) {
          ...InviteFields
        }
      }`
  )

  return (
    <div
      className={styles.invite}
    >
      <CopyInput
        groupClassName='mb-1'
        size='sm' type='text'
        placeholder={`https://stacker.news/invites/${invite.id}`} readOnly noForm
      />
      <div className={styles.other}>
        <span>{invite.gift} sat gift</span>
        <span> \ </span>
        <span>{invite.invitees.length} joined{invite.limit ? ` of ${invite.limit}` : ''}</span>
        {active
          ? (
            <>
              <span> \ </span>
              <span
                className={styles.revoke}
                onClick={() => revokeInvite({ variables: { id: invite.id } })}
              >revoke
              </span>
            </>)

          : invite.revoked && (
            <>
              <span> \ </span>
              <span
                className='text-danger'
              >revoked
              </span>
            </>)}
      </div>
    </div>
  )
}