import React, { useState } from 'react';
import styled from 'styled-components';
import ExpandButton from './IframeOverlay/ExpandButton.js';
import Drawer from '@material-ui/core/Drawer';
import DrawerContent from './IframeOverlay/DrawerContent.js';

export default function IframeOverlay(props) {
	const [expanded, setExpanded] = useState(false);
	
	const handleClickButton = () => {
		setExpanded(!expanded);
	}
	
	const closeDrawer = () => {
		setExpanded(false);
	}

  return (
		<div>
			<WrapperDiv>
				<ExpandButton
					onClick={handleClickButton}
					expanded={expanded}
				/>
			</WrapperDiv>
			<StyledDrawer anchor="right" open={expanded} onClose={closeDrawer}>
				<DrawerContent tag={props.tag}/>
			</StyledDrawer>
		</div>
  );
}

const WrapperDiv=styled.div`
	position: absolute;
	right: 0;
	top: 200px;
	z-index: 2;
`
const StyledDrawer=styled(Drawer)`
	overflow-y: scroll;
`