'use strict'

import React from 'react';
import yspMixins from '../utils/yspMixins'
import Titlebar from '../Titlebar';
import Paragraph from '../Paragraph';
import Img from '../Img';

const FeaturesGroup = React.createClass({

    statics: {

        getDefaultData(){
            return [
                {
                    'img': 'http://a.static.amazeui.org/assets/2.x/i/ui/foundation.png',
                    'title': '为移动而生',
                    'text': 'Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。'
                },
                {
                    'img': 'http://a.static.amazeui.org/assets/2.x/i/ui/web.png',
                    'title': '组件丰富，模块化',
                    'text': 'Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。'
                },
                {
                    'img': 'http://a.static.amazeui.org/assets/2.x/i/ui/chinese.png',
                    'title': '本地化支持',
                    'text': '相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。'
                },
                {
                    'img': 'http://a.static.amazeui.org/assets/2.x/i/ui/mobile.png',
                    'title': '轻量级，高性能',
                    'text': 'Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。'
                },
                {
                    'img': 'http://a.static.amazeui.org/assets/2.x/i/ui/mobile.png',
                    'title': '轻量级，高性能',
                    'text': 'Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。'
                }
            ]
        }
    },

    render: function () {

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

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

    _structureNodeGroup: function (data) {

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

        var index = 0;

        return yspMixins.arrayChunk(data, 2).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-6 am-u-md-6'}>
                                <img src={item.img} className={'am-center'}/>
                                <Titlebar {...props}
                                    className={'am-text-center'}
                                    data={item.title}
                                    editorType={'Titlebar'}
                                    style={styles}>
                                </Titlebar>
                                <Paragraph {...props}
                                    editorType={'Paragraph'}
                                    data={item.text}>
                                </Paragraph>
                            </div>
                        )
                    }.bind(this))}
                </div>
            )
        }.bind(this))
    }
})

export default FeaturesGroup;