import { Typography } from '@signatu/styles';
import { TrackerInfoList } from '@signatu/trackerdetect-react';
import React from 'react';
import Highlight from 'react-highlight';

import { CookieBanner } from '..';
import { DemoCard, DemoProps, DemoState } from './common';
import { Consent } from '@signatu/consent';


export interface CookieBannerDemoState extends DemoState {
    active: boolean
}

export class CookieBannerDemo extends React.Component<DemoProps, CookieBannerDemoState> {
    name = "Cookie Banner"
    doc = <Highlight className='hljs'>
    {`

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

const config = {
    apiKey: "YOUR_API_KEY", 
    accessToken: "YOUR_ACCESS_TOKEN"
}
const demoTrackers = ['googleanalytics', 'signatu', 'adform', 'aws']

<CookieBanner 
    config={config}
    subject={Consent.anonSubject()}
    issuer="signatu.com"
    target="signatu.com/demo/cookies"
    scope={demoTrackers.join(' ')}
    language={this.props.language}>

    <Typography variant="subtitle">We share data with following third parties: </Typography>

    <TrackerInfoList
        config={config}
        trackerNames={demoTrackers}>
    </TrackerInfoList>
</CookieBanner>
}

  `}
  </Highlight>
    
    state: CookieBannerDemoState = {
        active: false
    }
    
    render() {
        const demoTrackers = ['googleanalytics', 'signatu', 'adform', 'aws']
        const { config } = this.props
        const demo = <div>
                <Typography variant="title">Cookie Banner</Typography>

                <p>The cookie banner accepts a list of Trackers and will dynamically build a Cookie Consent 
                overlay. The overlay will use the theme colors and open at the bottom of the screen. </p>

                <p> Once you choose accept or refuse, the banner does not show again for the same Subject ID. 
                    If you want trigger a new dialog, click <strong>NEW SUBJECT ID</strong> above. 
                </p>
                <CookieBanner 
                    config={config}
                    subject={Consent.anonSubject()}
                    issuer="signatu.com"
                    target="signatu.com/demo/cookies"
                    scope={demoTrackers.join(' ')}
                    language={this.props.language}>

                    <Typography variant="subtitle">We share data with following third parties: </Typography>
                    
                    <TrackerInfoList
                        config={config}
                        trackerNames={demoTrackers}>
                    </TrackerInfoList>
                </CookieBanner>
        </div>
        return <DemoCard element={demo} doc={this.doc}/>
    }
}



