import { Language } from '@signatu/common-lib';
import { Consent } from '@signatu/consent';
import { DataProcessingAction, DataProcessingContent, PolicyDataProcessing } from '@signatu/policy';
import React from 'react';

import { DataProcessingConsent } from '..';
import { DemoCard, DemoProps } from './common';
import Highlight from 'react-highlight'


const dataTexts: {[id: string]: string} = {
    'en': 'e-mail', 
    'no': 'e-post'
}

const purposeTexts: {[id: string]: string} = {
    'en': 'send you marketing emails.', 
    'no': 'å sende deg direkte markedsføring.'
}


export class DataProcessingDemo extends React.Component<DemoProps> {
    name = "Data Processing"
    doc = <Highlight className='hljs'>
    {`
import {DataProcessingConsent} from '@signatu/consent-react';
import {PolicyDataProcessing} from '@signatu/policy';

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

const processing: PolicyDataProcessing = getFromSomeWhere()

render() {
    return <DataProcessingConsent
        config={config} 
        title="Direct Marketing"
        subtitle={"You can always withdraw consent in the <a href="..."> privacy dashboard"}
        subject={Consent.anonUserId()}
        issuer="signatu.com"
        target="signatu.com/demo"
        scope="directmarketing"
        language="en"
        dataprocessing={processing}/>
}
`}
    </Highlight>

    state = {}

    render() {
        const subtitle = <div>
            <span>Please read our <a href="https://signatu.com/
            
            ">Privacy Policy</a>. You can always withdraw consent in the </span>
            <a href="https://signatu.com">privacy dashboard.</a>
        </div>
        const processing = new PolicyDataProcessing(DataProcessingAction.COLLECT, dataTexts[this.props.language], purposeTexts[this.props.language])
        processing.addContent(
            new DataProcessingContent('We collect your name in EU and EFTA to allow you sign up for and use signatu and enable you to include your contact details in the privacy policy that you generate with signatu.', new Language('en'))
        )
        
        const demo = <DataProcessingConsent
                config={this.props.config} 
                language={this.props.language}
                title="Direct Marketing"
                subtitle={subtitle}
                subject={Consent.anonUserId()}
                issuer="signatu.com"
                target="signatu.com/demo"
                scope="directmarketing"

                dataprocessing={processing}
                >
            </DataProcessingConsent>
        
        return <DemoCard element={demo} doc={this.doc}/>
    }
}



