import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
import Chip from '@material-ui/core/Chip';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import ExpandedMaterialCard from './ExpandedMaterialCard';
import Paper from '@material-ui/core/Paper';
import Library from '@material-ui/icons/LibraryBooks';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        '& > *': {
            margin: theme.spacing(0.5),
        },
    },
}));

const ExpandedMaterial = (props) => {
    const material = { ...props.material };
    const classes = useStyles();

    return (
        <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
            <Grid container direction="row" spacing={2}>
                <Grid item direction="column" xs={4}>
                    <Grid item>
                        <Title variant="body2">
                            {
                                material.name
                            }
                        </Title>
                    </Grid>
                    <SizedHeightBox />
                    <Grid item>
                        <ChipsDiv className={classes.root}>
                            {
                                material.tags.map((tag, index) => {
                                    return (
                                        <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
                                    )
                                })
                            }
                        </ChipsDiv>
                    </Grid>
                    <SizedHeightBox2 />
                    <Grid item direction="column" style={{ color: '#E5E7E9', fontWeight: "500" }}>
                        <DevelopedByDiv>
                            {
                                `Desenvolvido por: ${material.developed}`
                            }
                        </DevelopedByDiv>
                        <SizedHeightBox3 />
                        <Button variant="contained" color="secondary">
                            Ver todos
                        </Button>
                    </Grid>
                </Grid>
                <Grid item direction="column" xs={8}>
                    <Grid container direction="row" alignItems="center">
                        <Library style={{ color: "White" }} />
                        <SizedWidthBox />
                        <Title>
                            {material.topics.length} módulos
                        </Title>
                    </Grid>
                    <SizedHeightBox />
                    <Grid container direction="row" spacing={3}>
                        {/* <Grid item md={3}>
                            <ExpandedMaterialCard
                                name={material.topics[1].pre_title + material.topics[1].title}
                                thumb={material.topics[1].img}
                            />
                        </Grid> */}
                        {
                            material.topics.map((material, index) => {
                                return (
                                    <Grid item key={index} md={4}>
                                        <ExpandedMaterialCard
                                            name={material.pre_title + material.title}
                                            thumb={material.img}
                                        />
                                    </Grid>
                                )
                            })
                        }
                    </Grid>
                </Grid>
            </Grid>
        </Paper>
    );
}

const Title = styled.h3`
    color: White;
    font-weight: 500;
    padding : 0; 
    margin  : 0; 
`
const DevelopedByDiv = styled.div`
`

const ChipsDiv = styled.div`
    margin-left : -5px;
`
const SizedHeightBox = styled.div`    
    height : 3em;
`
const SizedHeightBox2 = styled.div`    
    height : 2em;
`
const SizedHeightBox3 = styled.div`    
    height : 0.5em;
`
const SizedWidthBox = styled.div`
  width : 5px;
`

export default ExpandedMaterial;