import {Button} from '@material-ui/core';
import { Consent } from '@signatu/consent';
import React from 'react';
import Highlight from 'react-highlight';

import { ConsentButtons, makeConsentCondPopup } from '..';
import { DemoCard, DemoProps, DemoState } from './common';


export interface CondTrackerPopupDemoState extends DemoState {
    active: boolean
}

/** Create a higher-order component that wraps TrackerConsent in a popup */
const ConsentButtonsCondPopup = makeConsentCondPopup(ConsentButtons)

export class CondTrackerPopupDemo extends React.Component<DemoProps, CondTrackerPopupDemoState> {
    name = "Tracker Consent Popup"
    doc = <Highlight className='hljs'>
    {`

import {DataProcessingConsent} from '@signatu/consent-react';

const config = {
    apiKey: "YOUR_API_KEY", 
    accessToken: "YOUR_ACCESS_TOKEN"
}

render() {
    return <TrackerConsentCondPopup
        config={config}
        tracker='adform'
        subject={Consent.anonSubject()}
        issuer="signatu.com"
        target="signatu.com/trackers"
        scope="adform"
        onLoaded={(consent: ConsentEvent) => this.setState({consent: consent})}
        onAction={(consent: ConsentEvent) => this.setState({consent: consent})}>
            <div>
                We use AdForm to manage our programmatic advertising that keeps this paper free for you. 
            </div>
    </TrackerConsentCondPopup>
}

  `}
  </Highlight>
    
    state: CondTrackerPopupDemoState = {
        active: false
    }
    
    render() {
        const demo = <div>
                <h2>Conditional tracker consent</h2>
                This popup will show only when you have not taken action. When you have given your consent or refusal the 
                popup will not appear again. Click <b>Activate</b> to activate the conditional. 
                <br/>
                <br/>
                Note that if you have already taken action (accepted or declined) the popup will not
                show even when you activate. This is by design. To test again, create a new Subject ID
                (top of screen) and reload the page. 
                <br/>
                <div style={{marginTop: "2em", marginBottom: "2em"}}>
                    <div><b>Active:</b> {this.state.active.toString()}.</div>
                    {this.state.active && <div><b>Status:</b> {Consent.text(this.state.consent, this.props.language)}</div>}
                </div>
                
                <Button variant="raised" disabled={this.state.active} onClick={() => this.setState({active: true})}> Activate </Button>

                {this.state.active && <ConsentButtonsCondPopup
                    id="buttons_consent"
                    config={this.props.config} 
                    subject={Consent.anonUserId()}
                    issuer="signatu.com"
                    autoClose={true}
                    onLoaded={consent => this.setState({consent})}
                    onAction={consent => this.setState({consent})}
                    target="signatu.com/demo/conditional"
                    language={this.props.language} >
                        This popup will show only when you have not taken action. When you have given your consent or refusal the 
                        popup will not appear again. Click <b>Accept</b> or <b>Refuse</b>. The popup is configured to close automatically.
            </ConsentButtonsCondPopup> 
                    
                }
        </div>
        return <DemoCard element={demo} doc={this.doc}/>
    }
}



