'use strict'

import React from 'react';

import yspMixins from '../utils/yspMixins'
import Titlebar from '../Titlebar';
import Paragraph from '../Paragraph';

const FooterTopGroup = React.createClass({

    statics: {

        getDefaultData(){
            return {
                title: '站在巨人的肩膀上',
                subTitle: 'Amaze UI 汲取了很多优秀的社区资源，通过开源的形式来回馈社区。',
                content: [
                    {
                        title: 'MIT License',
                        text: 'Amaze UI 使用 MIT 许可证发布，用户可以自由使用、复制、修改、合并、出版发行、散布、再授权及贩售 Amaze UI 及其副本。'
                    },
                    {
                        title: 'Heroes',
                        text: '参考、使用的项目：jQuery, Zepto.js, Seajs, LESS, normalize.css, FontAwesome, Bootstrap, Foundation, UIKit, Pure, Framework7, etc.'
                    },
                    {
                        title: 'Credits',
                        text: '我们追求卓越，然时间、经验、能力有限。Amaze UI 有很多不足的地方，希望大家包容、不吝赐教，给我们提意见、建议。感谢你们！'
                    }
                ]
            }
        }
    },

    render: function () {

        var data = this.props.data || FooterTopGroup.getDefaultData()

        var props = {
            'data-id': this.props['data-id'],
            'data-componentsid': this.props['data-componentsid'],
            'componentsType': this.props['componentsType'],
            'isEditMode': this.props['isEditMode'],
            'contentEditableClass': this.props['contentEditableClass']
        }

        return (
            <section>
                <div className={'amz-container'}>
                    <Titlebar {...props}
                        className={'am-text-center'}
                        data={data.title}
                        editorType={'h1'}
                        tag={'h1'}>
                    </Titlebar>

                    <Titlebar {...props}
                        className={'am-text-center'}
                        data={data.subTitle}
                        editorType={'h2'}
                        tag={'h2'}>
                    </Titlebar>
                </div>

                {this._structureNodeGroup(data.content)}
            </section>
        )
    },

    _structureNodeGroup: function (data) {

        var styles = {
            marginTop: '10px'
        };

        var index = 0;

        return yspMixins.arrayChunk(data, 3).map(function (item) {
            return (
                <div className={'am-g am-g-fixed'}>
                    {item.map(function (item) {

                        var props = {
                            'data-index': index++,
                            'data-componentsid': this.props['data-componentsid'],
                            'componentsType': this.props['componentsType'],
                            'isEditMode': this.props['isEditMode'],
                            'contentEditableClass': this.props['contentEditableClass']
                        }

                        return (
                            <div className={'col-md-4 am-u-md-4'}>
                                <Titlebar {...props}
                                    editorType={'Titlebar'}
                                    data={item.title}>
                                </Titlebar>
                                <Paragraph {...props}
                                    editorType={'Paragraph'}
                                    data={item.text}
                                    ></Paragraph>
                            </div>
                        )
                    }.bind(this))}
                </div>
            )
        }.bind(this))
    }
})

export default FooterTopGroup;