import React, { Component } from 'react'
import { Anchor, Card, Col, Row, Typography } from 'antd'
import { Container } from 'components'

import Window from './window'
import WindowOpen from './window/open'
import WindowClose from './window/close'
import WindowReload from './window/reload'

import Api from './api'
import ApiSetting from './api/setting'
import ApiUsage from './api/usage'

import Auth from './auth'

import Seed from './seed'

import Util from './util'
import UtilDict from './util/dict'
import UtilGlobal from './util/global'
import UtilFormat from './util/format'
import UtilFile from './util/file'
import UtilQuery from './util/query'

const { Title, Link } = Typography

const docs = [
    {
        title: '窗口',
        component: Window,
        children: [
            { title: '打开窗口', component: WindowOpen },
            { title: '关闭窗口', component: WindowClose },
            { title: '重新加载窗口', component: WindowReload },
        ],
    },
    {
        title: '接口',
        component: Api,
        children: [
            { title: '配置', component: ApiSetting },
            { title: '调用', component: ApiUsage },
        ],
    },
    {
        title: '权限渲染',
        component: Auth,
    },
    {
        title: '种子模版',
        component: Seed,
    },
    {
        title: '工具',
        component: Util,
        children: [
            { title: '读取字典', component: UtilDict },
            { title: '全局常量', component: UtilGlobal },
            { title: '字符串格式转化', component: UtilFormat },
            { title: '文件', component: UtilFile },
            { title: '查询相关', component: UtilQuery },
        ],
    },
]

export default class index extends Component {
    container = window

    setContainer = container => {
        this.container = (container || { parentNode: window }).parentNode
    }

    render() {
        return (
            <div ref={this.setContainer}>
                <Card bordered={false} className="mb-none">
                    <Container mode="fluid">
                        <Row gutter={[16, 24]} justify="center" align="middle">
                            <Col span={4}>
                                <Link href="https://react.docschina.org/" target="_blank">
                                    <img
                                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K"
                                        width="128"
                                        alt=""
                                    />
                                </Link>
                            </Col>
                            <Col span={4}>
                                <Link
                                    href="https://ant-design.gitee.io/components/overview-cn/"
                                    target="_blank"
                                >
                                    <img
                                        src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
                                        width="128"
                                        alt=""
                                    />
                                </Link>
                            </Col>
                            <Col span={4}>
                                <Link
                                    href="https://echarts.apache.org/zh/index.html"
                                    target="_blank"
                                >
                                    <img
                                        src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"
                                        width="128"
                                        alt=""
                                    />
                                </Link>
                            </Col>
                            <Col span={4}>
                                <Link href="http://lesscss.cn/" target="_blank">
                                    <img
                                        src="http://s.nodejs.cn/less/img/logo.png"
                                        width="128"
                                        alt=""
                                    />
                                </Link>
                            </Col>
                            <Col span={4}>
                                <Link href="https://www.lodashjs.com/" target="_blank">
                                    <img
                                        src="https://www.lodashjs.com/img/lodash.png"
                                        width="128"
                                        alt=""
                                    />
                                </Link>
                            </Col>
                            <Col span={4}>
                                <Link href="http://www.axios-js.com/zh-cn/" target="_blank">
                                    <img
                                        src="http://www.axios-js.com/logo.svg"
                                        width="128"
                                        alt=""
                                    />
                                </Link>
                            </Col>
                        </Row>
                        <br />
                        <Row gutter={16}>
                            <Col flex="1">
                                <Container mode="fluid">
                                    {docs.map((item, i) => (
                                        <React.Fragment key={i}>
                                            <section id={`doc-front-end-${i}`}>
                                                <Title level={2}>{item.title}</Title>
                                                {item.component && (
                                                    <item.component codes={this.props.codes} />
                                                )}
                                                {item.children && (
                                                    <>
                                                        <br />
                                                        <br />
                                                        {item.children.map((citem, ci) => (
                                                            <React.Fragment key={ci}>
                                                                <section
                                                                    id={`doc-front-end-${i}-${ci}`}
                                                                >
                                                                    <Title level={3}>
                                                                        {citem.title}
                                                                    </Title>
                                                                    {citem.component && (
                                                                        <citem.component
                                                                            codes={this.props.codes}
                                                                        />
                                                                    )}
                                                                </section>
                                                                <br />
                                                            </React.Fragment>
                                                        ))}
                                                    </>
                                                )}
                                            </section>
                                            <br />
                                        </React.Fragment>
                                    ))}
                                </Container>
                            </Col>
                            <Col flex="240px">
                                <Anchor
                                    getContainer={() => this.container}
                                    offsetTop={24}
                                    onClick={e => e.preventDefault()}
                                >
                                    {docs.map((item, i) => (
                                        <Anchor.Link
                                            key={i}
                                            href={`#doc-front-end-${i}`}
                                            title={item.title}
                                        >
                                            {item.children &&
                                                item.children.map((citem, ci) => (
                                                    <Anchor.Link
                                                        key={ci}
                                                        href={`#doc-front-end-${i}-${ci}`}
                                                        title={citem.title}
                                                    />
                                                ))}
                                        </Anchor.Link>
                                    ))}
                                </Anchor>
                            </Col>
                        </Row>
                        {this.props.supportInfo}
                    </Container>
                </Card>
            </div>
        )
    }
}