import { MenuItem, Select, Checkbox, FormControlLabel, TextField } from '@material-ui/core';
import { Consent, ConsentActionType } from '@signatu/consent';
import React from 'react';
import Highlight from 'react-highlight';

import { PolicyConsentDashboard } from '..';
import { DemoCard, DemoProps } from './common';

export interface PolicyDashboardDemoState {
    elementIds?: string[]
    policyId: string
    type: ConsentActionType
    filterPolicy: string
}
export class PolicyDashboardDemo extends React.Component<DemoProps, PolicyDashboardDemoState> {
    name = "PolicyDashboard"
    doc = <Highlight className='hljs'>
    {`
import {PolicyConsentDashboard} from '@signatu/consent-react';

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

render() {
    return <PolicyConsentDashboard
        config={config} 
        title="Policy Dashboard"
        subtitle={<span>You can withdraw your consent at any time in your <a href="https://signatu.com/app/account">Account Page</a>.</span>}
        elementIds={['4.1, 4.2']}
        type="checkbox"
        subject={Consent.anonUserId()}
        policyId="YOUR_POLICY_ID"
        language="en"
    />
}
`}
    </Highlight>

    state: PolicyDashboardDemoState = {
        policyId: "119", 
        type: ConsentActionType.CHECKBOX, 
        filterPolicy: ""
    }

    filterPolicy = event => {
        const filterPolicy = event.target.value
        this.setState({
            filterPolicy, 
            elementIds: filterPolicy && event.target.value.split(',')
        })
    }
    handlePolicyId = event => {
        this.setState({policyId: event.target.value})
    }
    render() {
        const demo = <div>
            <h1>Policy Consent  Dashboard</h1>
            <TextField
                id="policyid"
                label="Policy ID"
                value={this.state.policyId}
                onChange={this.handlePolicyId}
                margin="normal"
            />            
            <TextField
                id="filterpolicy"
                label="Filter policy"
                value={this.state.filterPolicy}
                onChange={this.filterPolicy}
                margin="normal"
            />
            <Select 
                    // floatingLabelText="Control type"
                    onChange={event => this.setState({type: event.target.value as ConsentActionType})}
                    value={this.state.type}>
                    <MenuItem value={ ConsentActionType.CHECKBOX } >Checkbox</MenuItem>
                    <MenuItem value={ ConsentActionType.BUTTONS } >Buttons </MenuItem>
            </Select>
            <PolicyConsentDashboard
                config={this.props.config} 
                title="Policy Dashboard"
                subtitle={<span>You can withdraw your consent at any time in your <a href="javascript:void(0)">Account Page</a>.</span>}
                elementIds={this.state.elementIds}
                subject={Consent.anonUserId()}
                policyId={this.state.policyId}
                language={this.props.language}
                type={this.state.type}
            />
        </div>
        return <DemoCard element={demo} doc={this.doc}/>
    }
}



