import { Collector } from "@heydovetail/collector-react"
import * as React from "react";

interface State {
  feedback: boolean;
}

class Example extends React.Component<{}, State> {
  public state: State = { feedback: false };

  public render() {
    return (
      <div>
        <button onClick={() => { this.setState({ feedback: true }); }}>Send feedback</button>

        {this.state.feedback ? (
          <Collector
            collectorId="yourCollectorId"
            defaultEntries={{ email: "[email protected]" }}
            onDismiss={(sent: boolean) => {
              sent ? console.log("Feedback sent!") : this.setState({ feedback: false });
            }}
            metadata={{ browser: navigator.userAgent }}
          />
        ) : null}
      </div>
    );
  }
}

export interface Props {
  // Collector ID from Dovetail.
  // Find this in your project’s collector settings.
  collectorId: string;

  // Optional key:value pairs for setting default data.
  // e.g. prefill user’s name and email if they’re logged in.
  defaultEntries?: { [key: string]: string };

  // Optional domain for where to fetch the dialog.
  // Defaults to dovetailapp.com.
  domain?: string;

  // Optional key:value pairs for passing extra information.
  // e.g. store browser version, local time, etc.
  metadata?: { [key: string]: string };

  // Called when the user clicks the ‘X’ icon to close the dialog
  // or the ‘Done’ button after successfully sending the form.
  //
  // Returns true or false depending on whether feedback was sucessfully sent
  // or false if the user just closed the dialog without sending feedback.
  onDismiss: (sent: boolean) => void;
}