import { createTheme, Theme, ThemeProvider, Typography } from '@signatu/styles';
import { Consent } from '@signatu/consent';
import React from 'react';
import Highlight from 'react-highlight';

import { ConsentButtons } from '../components/consentButtons';
import { consentContent, DemoCard, DemoProps } from './common';


const customTheme: Partial<Theme & any> = {
    palette: {
        backgroundColor: "#eee", 
        balanced: {
            main: "orange"
        }, 
        attention: {
            main: "red"
        }
    }
}

export class ButtonDemo extends React.Component<DemoProps> {
    name = "Buttons"
    doc = <Highlight className='hljs'>
    {`
import {Popup, TrackerConsent} from '@signatu/consent-react';

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

render() {
    return <ConsentButtons
        id="buttons_consent"
        config={config} 
        subject={Consent.anonUserId()}
        issuer="signatu.com"
        target="signatu.com/demo/buttons"
        language="en">
            <div>I consent that ACME Inc. can send me weekly personalized emails for the purpose of offering me relevant products and services.</div>
    </ConsentButtons> 
}
`}
    </Highlight>

    state = {}
    
    render() {
        const demo = <div>
            <Typography variant="subtitle">Standard button labels (supports multiple languages)</Typography>
            <ConsentButtons
                id="buttons_consent"
                config={this.props.config} 
                subject={Consent.anonUserId()}
                issuer="signatu.com"
                target="signatu.com/demo/checkboxandbuttons"
                language={this.props.language} >
                <div className="dataprocessing">
                    {consentContent[this.props.language]}    
                </div>
            </ConsentButtons>   
            <Typography onClick={()=>{}} variant="subtitle">Custom button labels</Typography>
            <ConsentButtons
                id="buttons_consent"
                config={this.props.config} 
                subject={Consent.anonUserId()}
                issuer="signatu.com"
                target="signatu.com/demo/customtexts"
                acceptText="Yes please!"
                refuseText="No way!"
                language={this.props.language} >
                <div className="dataprocessing">
                    {consentContent[this.props.language]}    
                </div>
            </ConsentButtons>  
            <Typography onClick={()=>{}} variant="subtitle">Strong font</Typography>
            <ThemeProvider theme={createTheme({typography: {fontWeight: 600}})}>
                <ConsentButtons
                    id="buttons_consent"
                    config={this.props.config} 
                    subject={Consent.anonUserId()}
                    issuer="signatu.com"
                    target="signatu.com/demo/customtexts"
                    acceptText="Yes please!"
                    refuseText="No way!"
                    language={this.props.language} >
                    <div className="dataprocessing">
                        {consentContent[this.props.language]}    
                    </div>
                </ConsentButtons>  
            </ThemeProvider>
            <Typography onClick={()=>{}} variant="subtitle">Custom colors</Typography>
            <ThemeProvider theme={createTheme(customTheme)}>
                <ConsentButtons
                    id="buttons_consent"
                    config={this.props.config} 
                    subject={Consent.anonUserId()}
                    issuer="signatu.com"
                    target="signatu.com/demo/customcolors"
                    language={this.props.language} >
                    <div className="dataprocessing">
                        {consentContent[this.props.language]}    
                    </div>
                </ConsentButtons>  
            </ThemeProvider>
        </div>
        return <DemoCard element={demo} doc={this.doc}/>

    }
}



