import 'highlight.js/styles/github.css';

import { Tab, Tabs } from '@material-ui/core';
import { Consent, ConsentConfig, ConsentEvent } from '@signatu/consent';
import React from 'react';

import { ButtonDemo } from './demo/button';
import { CheckboxDemo } from './demo/checkbox';
import { CondTrackerPopupDemo } from './demo/condTrackerPopup';
import { CookieBannerDemo } from './demo/cookieBanner';
import { DataProcessingDemo } from './demo/dataProcessing';
import { DataProcessingGroupDemo } from './demo/dataProcessingGroup';
import { DataProcessingSpecDemo } from './demo/dataProcessingSpecs';
import { PolicyDashboardDemo } from './demo/policyDashboard';
import TrackersDemo from './demo/trackers';

/** Styled components */
/** Code highlighter */
export interface ConsentDemoState {
    consent?: ConsentEvent
    elementIds?: string[]
    showPopup: boolean


    subjectId: string
    trackers: any[]

    /** Consent states */
    popupConsent?: ConsentEvent
    conditionalPopupConsent?: ConsentEvent

    selectedTab: number

}
export interface ConsentDemoProps {
    config: ConsentConfig
    subject: string
    language: string
}

const examples = [
    { name: "Buttons", component: ButtonDemo }, 
    { name: "Checkbox", component: CheckboxDemo }, 
    { name: "Processing", component: DataProcessingDemo }, 
    { name: "Specs", component: DataProcessingSpecDemo }, 
    { name: "Group", component: DataProcessingGroupDemo }, 
    { name: "Dashboard", component: PolicyDashboardDemo }, 
    { name: "Cookie", component: CookieBannerDemo }, 
    { name: "Tracker", component: TrackersDemo }, 
    { name: "Conditional", component: CondTrackerPopupDemo}
]
export class Demo extends React.Component<ConsentDemoProps, ConsentDemoState> {
    state: ConsentDemoState
    constructor(props) {
        super(props)
        this.state = {
            showPopup: false, 
            subjectId: Consent.anonSubject(), 
            trackers: [], 
            selectedTab: 0
        }
    }

    render() {
        const { config, language, subject } = this.props
        const tabs: any = examples.map((e, idx) => <Tab label={e.name} key={idx}/>)
        const selectedComponent = examples[this.state.selectedTab]
        const selectedTab = <selectedComponent.component config={config} subject={subject} language={language}/>

        return <div>
                <Tabs scrollable scrollButtons="auto" value={this.state.selectedTab} onChange={(event, value) => this.setState({selectedTab: value})}>
                    {tabs}
                </Tabs>
                {selectedTab}
        </div>
    }
}
