import React from 'react';

import {ChatWidget} from '@papercups-io/chat-widget';

// You can also import the following in v1.1.0 and above:
// import {ChatWidget, ChatWindow, Papercups} from '@papercups-io/chat-widget';
//
// The `ChatWindow` component allows you to embed the chat however you want,
// and the `Papercups` object provides access to functions that can programmatically
// open/close the chat widget, e.g.:
//
// `Papercups.open()` // => opens the chat widget
// `Papercups.close()` // => closes the chat widget
// `Papercups.toggle()` // => toggles (opens or closes) the chat widget

const ExamplePage = () => {
  return (
    <>
      {/*
        Put <ChatWidget /> at the bottom of whatever pages you would
        like to render the widget on, or in your root/router component
        if you would like it to render on every page
      */}
      <ChatWidget
        // Pass in your Papercups account token here after signing up
        token='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx'
        // Specify a Papercups inbox
        inbox='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx'
        title='Welcome to Papercups!'
        subtitle='Ask us anything in the chat window below 😊'
        newMessagePlaceholder='Start typing...'
        primaryColor='#13c2c2'
        // Optionally pass in a default greeting
        greeting='Hi there! How can I help you?'
        // Optionally pass in metadata to identify the customer
        customer={{
          name: 'Test User',
          email: '[email protected]',
          external_id: '123',
          metadata: {version: 1, plan: 'premium'}, // Custom fields go here
        }}
        // Optionally specify the base URL
        baseUrl='https://app.papercups.io'
        // Add this if you want to require the customer to enter
        // their email before being able to send you a message
        requireEmailUpfront
        // Add this if you want to indicate when you/your agents
        // are online or offline to your customers
        showAgentAvailability
      />
    </>
  );
};