import React from 'react';

import {
    Button, Box, Dialog,
    DialogActions, DialogContent, DialogTitle,
} from '@material-ui/core';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { makeStyles } from "@material-ui/core/styles"

const useStyles = makeStyles((theme) => ({
    cardGrid: {
        paddingTop: theme.spacing(8),
        paddingBottom: theme.spacing(8),
    },
    card: {
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
    },
    cardMedia: {
        paddingTop: '56.25%', // 16:9
    },
    cardContent: {
        flexGrow: 1,
    },
    copyButton: {
        justifyContent: "flex-end",
    },
    accordion: {
        backgroundColor: "#F6F7F9"
    }
}));

export default function UrlsDialog(props) {
    const classes = useStyles();
    return (
        <Dialog open={props.state.hitsopen} onClose={props.handleClose} aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">Link Activity</DialogTitle>
            <DialogContent>
                {props.hitActivity.map((activity) => (
                    <Accordion className={classes.accordion}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel1a-content"
                            id="panel1a-header"
                        >
                            <Typography className={classes.heading}>{activity.data.timestamp}</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <Box bgcolor="text.primary" color="background.paper" p={2} width={1}>
                                <div>
                                    <p><b>IPV4:</b>{activity.data.ipv4}</p>
                                    <p><b>User-Agent:</b>{activity.data.useragent}</p>
                                </div>
                            </Box>

                        </AccordionDetails>
                    </Accordion>
                ))}
            </DialogContent>
            <DialogActions>
                <Button onClick={props.handleClose} color="primary">
                    Cancel
              </Button>
            </DialogActions>
        </Dialog>
    );
}