import React, { Component } from 'react';
import {Icon,ListIcon,StackIcon,BorderIcon} from '../../../lib/components/icon';
import {Transform, Animated} from '../../../lib/filters';

const itemsOfList = [
    {content:'\\EA06',text:'我是傻我是啥'},
    {content:'\\EA06',text:'我是傻我是啥'},
    {content:'\\EA06',text:'我是傻我是啥'},
    {content:'\\EA06',text:'我是傻我是啥'},
    {content:'\\EA06',text:'我是傻我是啥'},
];

const itemsOfStack = [
    [
        {content:'\\f096',size:2}, // square-o
        {content:'\\f099',size:1}  // twitter
    ],
    [
        {content:'\\f111',size:2}, // circle
        {content:'\\f024',size:1,color:'white'}  // flag
    ],
    [
        {content:'\\f0c8',size:2}, // square
        {content:'\\f120',size:1,color:'white'}  // terminal
    ],
    [
        {content:'\\f083',size:1}, // camera
        {content:'\\f05e',size:2,color:'red'}  // ban
    ],
];

class IconTest extends Component {
    render() {
        return (
            <div>
                <div>
                <p>IconTest2</p>
                </div>
                <div>
                    <Icon content='\f083' style={{color: 'red'}}/>FontAwesome 1x <br/>
                    <Icon content='\f083' style={{color: 'red'}} size={'larger'}/>FontAwesome larger <br/>
                    <Icon content='\f083' style={{color: 'red'}} size={'2x'}/>FontAwesome 2x <br/>
                    <Icon content='\f083' style={{color: 'red'}} size={'3x'}/>FontAwesome 3x <br/>
                    <Icon content='\f083' style={{color: 'red'}} size={'4x'}/>FontAwesome 4x <br/>
                    <Icon content='\f083' style={{color: 'red'}} size={'5x'}/>FontAwesome 5x <br/>
                    <Icon fontName='weui' content='\EA06' />WeUI<br/>
                    <Icon fontName='weui' content='warn' />WeUI<br/>
                    
                    <ListIcon fontName='weui' items={itemsOfList}/>

                    <StackIcon size={'2x'} items={itemsOfStack[0]}/>
                    <StackIcon size={'2x'} items={itemsOfStack[1]}/>
                    <StackIcon size={'2x'} items={itemsOfStack[2]}/>
                    <StackIcon size={'2x'} items={itemsOfStack[3]}/>

                    <p>
                        <BorderIcon border position='left' icon={
                            <Icon size={'3x'} content='\f083'/>
                        }/>
        …tomorrow we will run faster, stretch out our arms farther… And then one fine morning So we beat on, boats against the current, borne back ceaselessly into the past. tomorrow we will run faster, stretch out our arms farther… And then one fine morning So we beat on, boats against the current, borne back ceaselessly into the past.      
                    </p>
                    <br/>
                    <Icon content='\f132'/> normal<br/>
                    <Transform transform='rotate_90' target={<Icon content='\f132'/>}/> rotate-90<br/>
                    <Transform transform='rotate_180' target={<Icon content='\f132'/>}/> rotate-180<br/>
                    <Transform transform='rotate_270' target={<Icon content='\f132'/>}/> rotate-270<br/>
                    <Transform transform='flip_horizontal' target={<Icon content='\f132'/>}/> flip-horizontal<br/>
                    <Transform transform='flip_vertical' target={<Icon content='\f132'/>}/> flip-vertical<br/>

                    <Animated ani='spin' target={<Icon size='3x' fixedWidth content='\f110'/>}/>
                    <Animated ani='pulse' target={<Icon size='3x' fixedWidth content='\f110'/>}/>

                </div>
            </div>
        );
    }
}

export default IconTest;