import BaseComponent from 'trc-client-core/src/components/BaseComponent';
import CourseCalendar from 'trc-client-core/src/course/CourseCalendar';
import Widget from 'trc-client-core/src/components/Widget';
import UserStore from 'trc-client-core/src/user/UserStore';
import Markdown from 'trc-client-core/src/components/Markdown';

import Grid from 'trc-client-core/src/components/Grid';
import Button from 'bd-stampy/components/Button';
import Col from 'trc-client-core/src/components/Col';

import TechnicalImportantInformationCollection from 'trc-client-core/src/technical/TechnicalImportantInformationCollection';

class TechnicalHomePageContent extends BaseComponent {
    constructor(props) {
        super(props);
        this.displayName = 'TechnicalHomePageContent';
    }
    render() {
        return <div>
            <Grid modifier="tight">
                {TechnicalImportantInformationCollection.sort((a, b) => a < b).map(this.renderImportantInformation)}
            </Grid>
            <h2>Upcoming Courses</h2>
            <CourseCalendar department="tech"/>
        </div>;
    }

    renderImportantInformation(item) {
        var url = item.url || '';
        return <Col key={item.title}>
            <Widget>
                <h3 className="hug-top">{item.title}</h3>
                <Markdown html={item.__content.substr(0, 101)}/>
                <Button href={url.replace('{{participantId}}', UserStore.get('participantId'))} className="margin-top w100">{item.cta}</Button>
            </Widget>
        </Col>;
    }
}

export default TechnicalHomePageContent;