import * as React from 'react';
import './CodeBox.css';
import {Render} from '../../render/index';
import {Tabs} from '@native-ads/antd';
import {HighLight} from '../common/HighLight';
import classNames from 'classnames';

const TabPane = Tabs.TabPane;

export interface CodeBoxPropsInterface {
    title: string;
    desc: string;
    code: string;
    language: string;
    mode?: string;
}

export class CodeBox extends React.Component<CodeBoxPropsInterface, {}> {
    constructor(props: CodeBoxPropsInterface) {
        super(props);
    }

    render() {
        let classText = classNames({
            [this.props.language]: true,
            'codeblock-wrapper': true
        });

        let renderZone;

        switch (this.props.language) {
            case 'json':
                renderZone = <Render code={this.props.code} global={{text: 'this is global value'}}/>;
                break;
            case '_raw_json':
                return (
                    <HighLight className={classText}>
                        {this.props.code.trim()}
                    </HighLight>
                );
            default:
                return (
                    <HighLight className={classText}>
                        {this.props.code.trim()}
                    </HighLight>
                );
        }

        return (
            <div className={'codebox'}>
                <Tabs defaultActiveKey="1" animated={false}>
                    <TabPane tab="Result" key="1">
                        {renderZone}
                    </TabPane>
                    <TabPane tab="Code" key="2">
                        <div className={'codeblock-wrapper'}>
                            <HighLight className={classText}>
                                {this.props.code.trim()}
                            </HighLight>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}