import React from 'react';
import { Col, Row } from 'antd';
import { uniqueId } from 'lodash';
import { Link } from 'react-router-dom';
import Masonry from 'react-masonry-css';

import StatCard from './StatCard';
import GraphComp from './GraphComp';
import Events from './Events';
import './infodash.css';

import { ReactComponent as QuestionIcon } from '../assets/image/info-icons/questions-icon.svg';
import { ReactComponent as ExamIcon } from '../assets/image/info-icons/exam-icon.svg';
import { ReactComponent as PracticeIcon } from '../assets/image/info-icons/practice-icon.svg';
import { ReactComponent as StudentEngaged } from '../assets/image/info-icons/student-engaged.svg';
import { ReactComponent as BatchIcon } from '../assets/image/info-icons/batch-icon.svg';
import { ReactComponent as PerformanceIcon } from '../assets/image/info-icons/perf-icon.svg';

const InfoDash = () => {

    const masonryStatItem = [
        <StatCard key={uniqueId()} heading="QUESTIONS CREATED" statVal={34} icon={<QuestionIcon/>} 
            footing={<>{<Link to="/draftQuestions">See questions</Link>} that are in the draft</>} />,
        <StatCard key={uniqueId()} heading="EXAMS CREATED" statVal={5} icon={<ExamIcon/>} 
            footing={<>{<Link to="/draftExams">See exams</Link>} that are in the draft</>} />,
        <StatCard key={uniqueId()} heading="PRACTICES CREATED" statVal={40} icon={<PracticeIcon/>} 
            footing={<>{<Link to="/draftPractise">See practices</Link>} that are in the draft</>} />,
        <StatCard key={uniqueId()} heading="STUDENTS ENGAGED" statVal={46} icon={<StudentEngaged/>} 
            footing={<Link to="">Manage Students</Link>} />,
        <StatCard key={uniqueId()} heading="ACTIVE BATCHES" statVal={23} icon={<BatchIcon/>} 
            footing={<Link to="">Create New</Link>} />,
        <StatCard key={uniqueId()} heading="TOTAL LIKES RECEIVED" statVal={146} icon={<PerformanceIcon/>} 
            footing={<Link to="">Go to Performance Section</Link>} />,
    ];

    const breakpointColumnsObj = {
        default: 3,
        1150: 2,
        768: 2,
        600: 1
    }

    return (
        <div className='info-dash'>
            <Row gutter={[15, 20]}>
                <Col sm={{span: 16, order: 1}} order={2} className='stats' span={24}>
                    <Masonry
                        breakpointCols={breakpointColumnsObj}
                        className="stat-masonry-grid"
                        columnClassName="stat-masonry-grid_column">
                            {masonryStatItem}
                    </Masonry>
                    <div className="stat-graph">
                        <GraphComp heading="STATISTICS"/>
                    </div>
                </Col>
                <Col sm={{span: 8, order: 1}} order={1} className='schedules' span={24}>
                    <Events />
                </Col>
            </Row>
        </div>
    );
}

export default InfoDash;
