import React from 'react';

import Example from './Example';
import Icon from '../../lib/Icon';
import Button from '../../lib/Button';
import IconButton from '../../lib/IconButton';
import FABButton from '../../lib/FABButton';

function xCode ( props ) {
    let { children } = props;

    return (
    <div>
    { React.Children.map( children, child => {
        let type = child.type.name;
        let childCount = React.Children.count( child.props.children );

        return (
            <code>
            { /* opening tag */ }
            { `<${ type }` }
            { /* props */ }
            <Props { ...child.props } />
            { childCount === 0 ?
                ` />` :
                /* children */
                React.Children.map( child.props.children, childchild =>
                    <div style={{ marginLeft: '1em' }}>
                        <Code>{ childchild }</Code>
                    </div>
                )
            }
            </code>
        );
        // <Props { ...other } />
        // { `>` }
        // { `</${ type }>` }
    } ) }
    </div>
    );
};

let Colored = ( props ) => (
    <Example>
        <FABButton colored>
            <Icon name="add" />
        </FABButton>
        <FABButton colored ripple={ false }>
            <Icon name="add" />
        </FABButton>
    </Example>
);

export default ( props ) => (
    <section { ...props }>
        <h3>Buttons</h3>
        <Colored />

        <Example>
            <FABButton>
                <Icon name="add" />
            </FABButton>
            <FABButton ripple={ false }>
                <Icon name="add" />
            </FABButton>
            <FABButton disabled>
                <Icon name="add" />
            </FABButton>
        </Example>

        <Example>
            <Button raised>Button</Button>
            <Button raised ripple={ false }>Button</Button>
            <Button raised disabled>Button</Button>
        </Example>

        <Example>
            <Button raised colored>Button</Button>
            <Button raised accent>Button</Button>
            <Button raised accent ripple={ false }>Button</Button>
        </Example>

        <Example>
            <Button>Button</Button>
            <Button ripple={ false }>Button</Button>
            <Button disabled>Button</Button>
        </Example>

        <Example>
            <Button primary colored>Button</Button>
            <Button accent>Button</Button>
        </Example>

        <Example>
            <IconButton name="mood" />
            <IconButton colored name="mood" />
        </Example>

        <Example>
            <FABButton mini>
                <Icon name="add" />
            </FABButton>
            <FABButton colored mini>
                <Icon name="add" />
            </FABButton>
        </Example>
    </section>
);

@@ -225,885 +225,8 @@
 ';%0A%0A
-function xCode ( props ) %7B%0A    let %7B children %7D = props;%0A%0A    return (%0A    %3Cdiv%3E%0A    %7B React.Children.map( children, child =%3E %7B%0A        let type = child.type.name;%0A        let childCount = React.Children.count( child.props.children );%0A%0A        return (%0A            %3Ccode%3E%0A            %7B /* opening tag */ %7D%0A            %7B %60%3C$%7B type %7D%60 %7D%0A            %7B /* props */ %7D%0A            %3CProps %7B ...child.props %7D /%3E%0A            %7B childCount === 0 ?%0A                %60 /%3E%60 :%0A                /* children */%0A                React.Children.map( child.props.children, childchild =%3E%0A                    %3Cdiv style=%7B%7B marginLeft: '1em' %7D%7D%3E%0A                        %3CCode%3E%7B childchild %7D%3C/Code%3E%0A                    %3C/div%3E%0A                )%0A            %7D%0A            %3C/code%3E%0A        );%0A        // %3CProps %7B ...other %7D /%3E%0A        // %7B %60%3E%60 %7D%0A        // %7B %60%3C/$%7B type %7D%3E%60 %7D%0A    %7D ) %7D%0A    %3C/div%3E%0A    );%0A%7D;%0A%0A
 let 

Remove leftover code