import React, { Component } from 'react'
import { Tabs } from 'antd'
import BackEnd from './back-end'
import FrontEnd from './front-end'

const tabs = [
    {
        title: '后端',
        component: BackEnd,
    },
    {
        title: '前端',
        component: FrontEnd,
    },
]

export default class index extends Component {
    state = {
        activeKey: '0',
    }

    codes = {}

    constructor(props) {
        super(props)

        // 读取doc-code下所有文件内容
        const files = require.context(
            '../../../../public/doc-code',
            true,
            /\.(txt|js|jsx|html|vue|css|less|json|cs)(\?.*)?$/
        )
        const codes = {}
        files.keys().forEach(p => {
            const filepath = p.slice(2)
            const xhr = new XMLHttpRequest()
            xhr.open('GET', `./doc-code/${filepath}`, false)
            xhr.overrideMimeType('text/plain;charset=utf-8')
            xhr.send(null)
            codes[filepath] = xhr.responseText
        })

        this.codes = codes
    }

    render() {
        const { activeKey } = this.state

        return (
            <div className="yo-form-page">
                <div className="yo-form-page-layout">
                    <div className="yo-tab-external-mount">
                        <Tabs onChange={activeKey => this.setState({ activeKey })} centered>
                            {tabs.map((item, i) => (
                                <Tabs.TabPane key={i} forceRender={true} tab={item.title} />
                            ))}
                        </Tabs>
                        <div className="yo-tab-external-mount-content">
                            {tabs.map((item, i) => (
                                <div
                                    key={i}
                                    className={[
                                        'yo-tab-external-tabpane',
                                        activeKey == i
                                            ? 'yo-tab-external-tabpane-active'
                                            : 'yo-tab-external-tabpane-inactive',
                                    ].join(' ')}
                                >
                                    <item.component codes={this.codes} {...this.props} />
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}