import { Accordion, AccordionDetails, AccordionSummary, Avatar, Button, Divider, Drawer, IconButton, List, ListItem, ListItemAvatar, Paper, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { connect } from 'react-redux';
import { Box } from '@mui/system';
import { backendURL, gql } from '../../helpers/gql';
import { actionPromise } from '../../actions/actionsPromise';
import React from 'react';
import {useDropzone} from 'react-dropzone';
import { useEffect} from 'react';
import { uploadFile } from '../../helpers/uploadFile';
import DropZoneAvatar from '../DropZone/DropZoneAvatar';

import { actionAuthLogout } from '../../actions/actionLogin';
import { store } from '../../App';
import NewChatButton from '../NewChatButton';
import { actionSetUserAvatar } from '../../actions/actionsMedia';
import { ListItemWrap, StyledSpan, UserMenuHeader, UserMenuTitle } from './UserMenu.style';
import ChatIcon from "./icons8-chat.png";
import { actionOpenModal } from '../../reducers/modalReducer';
import Exit from "../ChatInfoOptions/icons8_exit.png";
import EditIcon from '@mui/icons-material/Edit';

// const actionUploadFiles = (files) => 
// actionPromise('filesUpload', Promise.all(files.map((file) => uploadFile(file))))

const UserMenu = ({open, setOpen, closeUserMenu, userInfo: {nick, avatar} }) => {
	
	return (
		<Drawer 
			anchor='left'
			open={open}
			onClose={closeUserMenu}
		>
			<div style={{width: "300px"}}> 
				<UserMenuHeader>
					<Avatar
						src={`${backendURL}/${avatar?.url || ''}`}
						alt={nick}
						sx={{width: 60, height: 60}}
					/>
					<UserMenuTitle>
						{nick}
					</UserMenuTitle>
				</UserMenuHeader>
				<Divider/>
				
				<List>
					<ListItemWrap onClick={() => setOpen('createChatModal')}>
						<img src={ChatIcon} alt="chatIcon" style={{height: "22px"}}/> <StyledSpan>New chat</StyledSpan>
					</ListItemWrap>
					<ListItemWrap onClick={() => setOpen('userEditorModal')}>
						<EditIcon/> <StyledSpan>Edit profile</StyledSpan>
					</ListItemWrap>
					<ListItemWrap onClick={() => store.dispatch(actionAuthLogout())}>
						<img src={Exit} alt="chatIcon" style={{height: "22px"}}/> <StyledSpan>Log out</StyledSpan>
					</ListItemWrap>
				</List>
			</div> 
		</Drawer>
	)
}

export default connect(state => ({userInfo: state.promise?.aboutMe?.payload || {}}), {setOpen : actionOpenModal})(UserMenu)