import React, { useState, useEffect } from "react";
import ReactHtmlParser from "react-html-parser";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import ReactPaginate from "react-paginate";

import classNames from "classnames";
import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import CardHeader from "components/Card/CardHeader.js";
import Card from "components/Card/Card.js";
import Carousel from "react-slick";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, news, othernews,...props }) {
    const classes = useStyles();
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        time: 5
    };
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const otherlatnews = othernews.map((data) => {
        return (
        <Grid align="center" style={{padding:"5px", marginTop:"-50px"}}>
            <Card style={{width: "20rem"}}>
                <img
                style={{height: "180px", width: "100%", display: "block"}}
                className={classes.imgCardTop}
                src={`${backend}${data.img[0]["url"]}`}
                />
                <CardBody>
                <p>{data.title}</p>
                <Button color="info" round href={"/latestnews_details?s="+data.id}>
                    <Icon className={classes.icons}>open_in_new</Icon>Read More
                </Button>
                </CardBody>
            </Card>
        </Grid>
        );
    })
    const latnews = news.map((data) => {
        return (
            
            <GridContainer justify="center">
                <Grid fluid xs={4}> 
                    <div className={classes.section} id="notifications">
                        <div className={classes.section}>
                            <div className={classes.container}>
                            <GridContainer>
                                <GridItem className={classes.marginAuto}>
                                    <Card carousel>
                                        <Carousel {...settings}>
                                            <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                                        </Carousel>
                                    </Card>
                                    <hr></hr>
                                    <div align="center">
                                        <h3>Other Latest News</h3>
                                        <h3>{otherlatnews}</h3>
                                    </div>
                                </GridItem>
                            </GridContainer>
                            </div>
                        </div>
                    </div>
                </Grid>
                <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
                    <h4>{data.title}</h4>
                    <h4>{data.published_at}</h4>
                    <hr></hr>
                    <div align="justify">
                        <p>{ReactHtmlParser(data.description)}</p>
                    </div>
                </Grid>
            </GridContainer>
        );
    });
    return (
        <Card className={classes.textCenter}>
            <div align="center">
                <CardHeader color="info">News</CardHeader>
            </div>
            <CardBody>
                <div align="center">
                </div>
                <GridContainer justify="center">
                {latnews}
                </GridContainer>
            </CardBody>
        </Card>
    );
};

export default DataLatestNews;