import React from 'react'

export interface IPropTypes {
    picurl?: string,
    link?: string,
    style?: object,
    className?: string,
    childStyle?: object,
    pageSpace?: Number,
    space?: Number,

    [propsName: string]: any
}

class MagicItem extends React.Component<IPropTypes, any> {
    constructor(props: IPropTypes) {
        super(props);
        this.state = {
            style: {}
        }
    }

    componentWillReceiveProps(nextProps: Readonly<IPropTypes>, nextContext: any): void {
        if (nextProps.style) {
            this.setState({
                style: nextProps.style
            })
        }
    }

    componentDidMount(): void {

    }

    render(): React.ReactElement<any> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {

        let style = {};
        if (this.props.paddingBottom) {
            style['paddingBottom'] = this.props.space + 'px'
        }
        style['paddingRight'] = this.props.space + 'px';

        let childStyle = {};
        let itemHeights = this.props.itemHeights;
        if (this.props.itemHeights && this.props.itemHeights.length > 0) {
            for (let i = 0; i < itemHeights.length; i++) {

            }
        }
        return (
            <a href={this.props.link ? this.props.link : "javascript:"}
               className={'shop-magic-item' + (this.props.className ? ' ' + this.props.className : '')}
               style={style}
            >
                <div style={this.props.itemHeight ? {'paddingTop': this.props.itemHeight} : {}}>
                    <span className={'shop-magic-img'}
                          style={{'backgroundImage': 'url("' + (this.props.picurl ? this.props.picurl : '') + '")'}}></span>
                </div>
            </a>
        );
    }
}

export default MagicItem
;