import '@material/grid-list/dist/mdc.grid-list.css';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classNames from 'classnames';
import { MDCGridList } from '@material/grid-list';

// TODO: Aspect ratio
/** Grid Lists */
class GridList extends Component {
    static propTypes = {
        darkTheme: PropTypes.bool,
        /**
         * Grid lists support header caption. You can change the footer caption to be a header caption.
        */
        headerCaption: PropTypes.bool,
        /**
        * Children must be more than one Grid Tile components.
        */
        children: PropTypes.arrayOf(PropTypes.element).isRequired,
        /**
         * Grid list tiles can have 1px padding instead of 4px.
         */
        gutterSmall: PropTypes.bool,
        /**
         * Grid list tiles support all material guideline recommended aspect ratio: 1x1, 16x9, 2x3, 3x2, 4x3, 3x4
         */
        aspectRatio: PropTypes.oneOf([
            '1x1',
            '16x9',
            '2x3',
            '3x2',
            '4x3',
            '3x4',
        ]),
    };
    constructor(props) {
        super(props);

        this.mainRoot = React.createRef();
    }
    componentDidMount() {
        this.gridList = new MDCGridList(this.mainRoot.current);
    }
    render() {
        const {
            aspectRatio, children, headerCaption, darkTheme, gutterSmall,
        } = this.props;
        const childProps = children.map(child =>
            child.props);
        const hasIcon = childProps.filter(child =>
            child.icon).length > 0;
        const hasSupportText = childProps.filter(child =>
            child.supportText).length > 0;
        const cx = classNames(
            'mdc-grid-list',
            { 'mdc-grid-list--theme-dark': darkTheme },
            {
                'mdc-grid-list--header-caption': headerCaption,
            }, {
                'mdc-grid-list--twoline-caption': hasSupportText,
            }, {
                'mdc-grid-list--with-icon-align-end': hasIcon,
            }, {
                'mdc-grid-list--tile-gutter-1': gutterSmall,
            }, {
                [`mdc-grid-list--tile-aspect-${aspectRatio}`]: aspectRatio,
            },
        );
        return (
            <div ref={this.mainRoot} className={cx}>
                <ul className="mdc-grid-list__tiles">
                    {children}
                </ul>
            </div>
        );
    }
}
export default GridList;
