import React from 'react';
import { selectorService } from "../../services/selectorService";
import { Skeleton, Typography } from 'antd';
import { CoffeeOutlined, RestTwoTone } from '@ant-design/icons';
import './LiveExamSnippet.css';

const LiveExamSnippet = () => {

    const [loading, setLoading] = React.useState(true);
    const [liveExamList, setExamList] = React.useState([]);

    React.useEffect(() => {
        selectorService.liveExam({
            pageSize: 5, pageNumber: 1,
        }).then((res)=> {
            // console.log(res);
            if(res.status.code === "-1") {
                if(res.status.message[0] === "No Record(s) Found!") {
                    setExamList([]);
                    setLoading(false);
                    return;
                }
                throw "Something went wrong, please try again";
            }
            setExamList(() => (res.result.exams));
            setLoading(false);
        }).catch((err) => {
            console.log(err);
        })
    }, []);

    return (
        <div className='live-exam-snippet'>
            {loading && <div style={{padding: '1rem'}}>
                <Skeleton paragraph={{rows: 2}} active />
            </div>}
            {!loading && liveExamList.length!== 0? liveExamList.map(examItem => {
                const createdDate = new Date(examItem.created_on);
                const endDate = new Date(examItem.end_date);
                // const updatedDate = new Date(examItem.updated_on);
                return <div className='exam-item' key={examItem.id}>
                    <Typography.Text style={{display: 'block'}} strong>{examItem.name}</Typography.Text>
                    <Typography.Text style={{display: 'block'}} type='secondary'>
                        {createdDate.toLocaleDateString()} {createdDate.toLocaleTimeString('hi', { hour12: false })} - {endDate.toLocaleDateString()} {endDate.toLocaleTimeString('hi', { hour12: false })}
                    </Typography.Text>
                    <Typography.Text style={{display: 'block'}} type='secondary'>Duration - {examItem.exam_duration/60} hrs</Typography.Text>
                </div>
                })
                : !loading && <div className='exam-item mt-1-5 center-flex flex--column'>
                    <RestTwoTone twoToneColor="#1449bc" style={{fontSize: 50, marginBottom: 15, borderRadius: '50%', padding: 12, border: '4px solid #1449bc'}} />
                    <Typography.Title style={{textAlign: 'center'}} level={4}>Hey, you have already caught up!!! Awesome!</Typography.Title>
                </div>
            }
        </div>
    );
}

export default LiveExamSnippet;
