import React from 'react'
import moment from 'moment'
import PropTypes from 'prop-types'
import {Flex} from 'react-uikit/layout'
import PortfolioShowcase from 'containers/portfolio-showcase'
import PageNotFound from 'containers/pages/not-found'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

class PortfolioShowcasePage extends React.PureComponent {
    static pageTitle = 'Portfolio Showcase'

    render() {
        const {
            portfolioId,
            portfolio: {fetchedAt},
        } = this.props
        const classes = bem.classNames('c-portfolio-showcase-page')
        const headerClasses = bem.classNames(
            'c-portfolio-showcase-page__header'
        )
        const showcaseClasses = bem.classNames(
            'c-portfolio-showcase-page__showcase'
        )
        const generatedOnDate = moment(fetchedAt).format(
            'MMMM Do YYYY [at] H:mma'
        )

        if (!portfolioId) {
            return <PageNotFound />
        }

        return (
            <Flex
                className={classes}
                direction="column"
                align="center"
                justify="start"
            >
                <div className={headerClasses}>
                    {fetchedAt ? `Generated on ${generatedOnDate}` : null}
                </div>

                <PortfolioShowcase
                    className={showcaseClasses}
                    portfolioId={portfolioId}
                />
            </Flex>
        )
    }
}

PortfolioShowcasePage.propTypes = {
    portfolio: PropTypes.shape({
        fetchedAt: PropTypes.oneOfType([
            PropTypes.instanceOf(Date),
            PropTypes.string,
        ]),
    }),
    portfolioId: PropTypes.string,
}

export default PortfolioShowcasePage