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

import Database from './database'
import DatabaseMigrations from './database/migrations'

import Application from './application'
import ApplicationEntity from './application/entity'
import ApplicationDto from './application/dto'
import ApplicationInterface from './application/interface'
import ApplicationService from './application/service'

const { Title, Link } = Typography

const docs = [
    {
        title: '数据库',
        component: Database,
        children: [
            {
                title: '实体(N)',
            },
            {
                title: '迁移',
                component: DatabaseMigrations,
            },
        ],
    },
    {
        title: '业务实现',
        component: Application,
        children: [
            {
                title: '实体',
                component: ApplicationEntity,
            },
            {
                title: '数据传输对象',
                component: ApplicationDto,
            },
            {
                title: '接口',
                component: ApplicationInterface,
            },
            {
                title: '业务实现',
                component: ApplicationService,
            },
        ],
    },
]

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://dotnet.microsoft.com/" target="_blank">
                                    <img
                                        src="https://dotnet.microsoft.com/static/images/redesign/downloads-dot-net-core.svg?v=p6MWQNHwEtnnx0MWJ-i7vCMt-sZmoBf6h-7XmdSs5RE"
                                        width="128"
                                        alt=""
                                    />
                                </Link>
                            </Col>
                            <Col span={4}>
                                <Link href="https://dotnetchina.gitee.io/furion/" target="_blank">
                                    <img
                                        src="https://dotnetchina.gitee.io/furion/img/furionlogo.png"
                                        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-back-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-back-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-back-end-${i}`}
                                            title={item.title}
                                        >
                                            {item.children &&
                                                item.children.map((citem, ci) => (
                                                    <Anchor.Link
                                                        key={ci}
                                                        href={`#doc-back-end-${i}-${ci}`}
                                                        title={citem.title}
                                                    />
                                                ))}
                                        </Anchor.Link>
                                    ))}
                                </Anchor>
                            </Col>
                        </Row>
                        {this.props.supportInfo}
                    </Container>
                </Card>
            </div>
        )
    }
}
