import React from 'react'
import PropTypes from 'prop-types'
import spriteSvg from 'open-iconic/sprite/sprite.svg'

export function Icon(props)
{
    const { name, className } = props;
    const fullClassName = 'icon icon-' + name + (className ? ' ' + className : '');

    if (name === 'none')
        return (<div className={fullClassName} />);

    return (
        <svg className={fullClassName}>
            <use xlinkHref={spriteSvg + '#' + name} />
        </svg>
    );
}

Icon.propTypes = {
    name: PropTypes.string.isRequired,
    className: PropTypes.string,
};

function defineButton()
{
    function Button(props, ref)
    {
        const { name, title, className, href, onClick, active } = props;

        const fullClassName = 'button'
            + (className ? ' ' + className : '')
            + (active ? ' active' : '');

        return (
            <a ref={ref} href={href || '#'} title={title} className={fullClassName} onClick={onClick}>
                <Icon name={name} />
            </a>
        );
    }

    Button.propTypes = {
        name: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
        className: PropTypes.string,
        href: PropTypes.string,
        onClick: PropTypes.func,
        active: PropTypes.bool
    };

    return Button;

}

export const Button = React.forwardRef(defineButton());

export function Menu(props)
{
    const { children } = props;

    return (
        <ul className='menu'>
            {children}
        </ul>
    );
}

export function MenuItem(props)
{
    const { title, href, onClick, checked } = props;

    let menuIcon;

    if (checked === true)
        menuIcon = (<Icon name='check' />);
    else if (checked === false)
        menuIcon = (<Icon name='none' />);
    else
        menuIcon = null;

    return (
        <li className='menu-item'>
            <a href={href || '#'} onClick={onClick}>
                { menuIcon }<span>{ title }</span>
            </a>
        </li>
    );
}

MenuItem.propTypes = {
    title: PropTypes.string.isRequired,
    href: PropTypes.string,
    onClick: PropTypes.func,
    checked: PropTypes.bool,
};

export function MenuSeparator(props)
{
    return (
        <li className='menu-separator' />
    );
}

export function MenuLabel(props)
{
    return (
        <li className='menu-label'>{props.title}</li>
    );
}

MenuLabel.propTypes = {
    title: PropTypes.string.isRequired
};

export function PanelHeader(props)
{
    return (
        <div className='panel-header'>
            <div className='header-block header-block-primary'>
                <span className='header-label header-label-primary'>{props.title}</span>
            </div>
        </div>
    );
}

PanelHeader.propTypes = {
    title: PropTypes.string.isRequired
};

@@ -573,38 +573,47 @@
 %7D;%0A%0A
-function defineButton()%0A%7B%0A    
+export const Button = React.forwardRef(
 func
@@ -640,22 +640,14 @@
 ef)%0A
-    %7B%0A  
+%7B%0A
     
-  
 cons
@@ -708,20 +708,16 @@
 props;%0A%0A
-    
     cons
@@ -751,20 +751,16 @@
         
- 
-   
 + (class
@@ -796,20 +796,16 @@
         
-   
- 
 + (activ
@@ -826,20 +826,16 @@
 : '');%0A%0A
-    
     retu
@@ -835,28 +835,24 @@
    return (%0A
-    
         %3Ca r
@@ -930,36 +930,32 @@
 lick=%7BonClick%7D%3E%0A
-    
             %3CIco
@@ -971,36 +971,32 @@
 ame%7D /%3E%0A        
-    
 %3C/a%3E%0A        );%0A
@@ -992,26 +992,16 @@
     
-   
- 
 );%0A
-    %7D%0A%0A    
+%7D);%0A%0A
 Butt
@@ -1017,20 +1017,16 @@
 pes = %7B%0A
-    
     name
@@ -1060,20 +1060,16 @@
 ed,%0A    
-   
- 
 title: P
@@ -1096,20 +1096,16 @@
 quired,%0A
-    
     clas
@@ -1133,20 +1133,16 @@
 ng,%0A    
-  
-  
 href: Pr
@@ -1157,20 +1157,16 @@
 string,%0A
-    
     onCl
@@ -1186,20 +1186,16 @@
 s.func,%0A
-    
     acti
@@ -1217,93 +1217,9 @@
 ool%0A
-    %7D;%0A%0A    return Button;%0A%0A%7D%0A%0Aexport const Button = React.forwardRef(defineButton())
+%7D
 ;%0A%0Ae

fix react warning