import { FormControl, InputLabel, MenuItem, Select, WithStyles, withStyles } from '@material-ui/core';
import { Consent, ConsentActionType } from '@signatu/consent';
import { TrackerInfoList } from '@signatu/trackerdetect-react';
import React from 'react';
import Highlight from 'react-highlight';

import { DataProcessingSpec } from '../components/dataProcessingSpec';
import { DemoCard, DemoProps, DemoState } from './common';
import { DataProcessingSpecSelector } from './dataProcessingSpecSelector';

export interface TrackerPopupDemoState extends DemoState {
    showPopup: boolean, 
    selectedTrackers: string[], 
    trackers: any[]
    specId?: string
}

const styles = theme => ({
    formControl: {
        margin: theme.spacing.unit,
        minWidth: 120,
      }    
})

class TrackersDemo extends React.Component<DemoProps & WithStyles<'root'>, TrackerPopupDemoState> {
    name = "Tracker Consent Popup"
    doc = <Highlight className='hljs'>
    {`
<DataProcessingSpec
    config={config}

    type={ConsentActionType.BUTTONS}
    specId={specId}
    subject={Consent.anonUserId()}
    issuer="signatu.com">

    <p>We share data with following third parties: </p>
    
    <TrackerInfoList
        config={config}
        trackerNames={selectedTrackers}>
    </TrackerInfoList>
</DataProcessingSpec>
  `}
  </Highlight>
    
    constructor(props) {
        super(props)
        this.state = {
            showPopup: false, 
            trackers: [], 
            selectedTrackers: []
        }
    }
    
    async componentWillMount() {
        const ALL_TRACKERS = "https://trackerdetect.production.signatu.com/trackerdetect/api/admin/services"
        const trackersResponse = await fetch(ALL_TRACKERS)
        this.setState({trackers: await trackersResponse.json()})
    }


    render() {
        const { classes, config } = this.props
        const { selectedTrackers, specId } = this.state
        const demo = <div>

            <DataProcessingSpecSelector config={this.props.config} onChange={event => this.setState({specId: event.target.value})}/>

            <FormControl className={classes.formControl}>
                <InputLabel htmlFor="tracker-select">Select Tracker(s)</InputLabel>
                <Select
                    style={{minWidth: 240, maxWidth: 500}} 
                    multiple
                    inputProps={{
                        name: 'tracker',
                        id: 'tracker-select',
                        }}
                    // floatingLabelText="Select Tracker"
                    onChange={event => this.setState({selectedTrackers: event.target.value as any})}
                    value={this.state.selectedTrackers}>
                    {this.state.trackers.map(t => <MenuItem
                        key={t.id}
                        value={t.id}>
                        {t.name}
                    </MenuItem>)}
                </Select>
            </FormControl>
            
            {specId && <DataProcessingSpec
                config={config}

                type={ConsentActionType.BUTTONS}
                specId={specId}
                subject={Consent.anonUserId()}
                issuer="signatu.com">

                {selectedTrackers.length > 0 && <div>
                    <p>We share data with following third parties: </p>
                    
                    <TrackerInfoList
                        config={config}
                        trackerNames={selectedTrackers}>
                    </TrackerInfoList>
                </div>}

                </DataProcessingSpec>
            }
        </div>

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

export default withStyles(styles)(TrackersDemo)

