import * as React from "react";
import MagicItem from './magicItem'

type ImgList = {
    link: string,
    picurl: string,
    [propsName: string]: any
}

export interface IPropTypes {
    pageSpace: number
    space: number,
    imgList: Array<ImgList>,
    number?: number,

    [propsName: string]: any
}

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

    componentDidMount(): void {

    }

    componentWillReceiveProps(nextProps: Readonly<IPropTypes>, nextContext: any): void {
        if (nextProps.pageSpace != this.state.pageSpace) {
            this.setState({
                pageSpace: nextProps.pageSpace
            });
        }

        if (nextProps.space != this.state.space) {
            this.setState({
                space: nextProps.space
            });
        }

        if (nextProps.imgList != this.state.imgList) {
            this.setState({
                imgList: nextProps.imgList
            });
        }
    }

    render(): React.ReactElement<any> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        let number = this.props.number;
        let imgList = this.props.imgList;
        imgList = imgList.slice(0, number);
        let newArray = [];
        if (imgList.length < number) {
            for (let i = number; i > imgList.length; i--) {
                let obj = {};
                obj['link'] = '';
                obj['picurl'] = '';
                newArray.push(obj)
            }
        }
        imgList = imgList.concat(newArray);

        let space = this.props.space;
        let pageSpace = this.props.pageSpace;

        /*外层包裹层样式*/
        let wrapperStyle = {};
        if (this.props.paddingBottom) {
            wrapperStyle['marginBottom'] = '-' + space + 'px'
        }
        wrapperStyle['padding'] = '0 ' + pageSpace + 'px';
        wrapperStyle['marginRight'] = '-' + space + 'px';

        return (
            <div className={'shop-magic-wrapper' + (this.props.className ? ' ' + this.props.className : '')}>
                <div style={wrapperStyle}>
                    {
                        imgList.map((data, index) => (
                            <MagicItem
                                space={this.props.space}
                                pageSpace={this.props.pageSpace}
                                key={index}
                                link={data.link}
                                picurl={data.picurl}
                                paddingBottom={this.props.paddingBottom}
                                className={'shop-magic-item-' + (index + 1)}
                                itemHeight={this.props.itemHeights && this.props.itemHeights[index] ? this.props.itemHeights[index] : null}
                            ></MagicItem>
                        ))
                    }
                </div>
            </div>
        );
    }
}

export default Magic;