FinalProject/src/pages/ProfilePage.jsx

import Header from "../components/Header";
import Footer from "../components/Footer";
import Breadcrumb from "../components/Breadcrumbs";
import {connect} from "react-redux";
import {Box, Button, Container, Grid, TextField, Typography, useMediaQuery} from "@mui/material";
import Redirect from "react-router-dom/es/Redirect";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import {useRef, useState} from "react";
import PropTypes from "prop-types";
import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
import CancelIcon from '@mui/icons-material/Cancel';
import SendAndArchiveIcon from '@mui/icons-material/SendAndArchive';
import {actionAuthLogout} from "../reducers/AuthReducer";
import {actionUserRemove} from "../reducers/UserReducer";

function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`vertical-tabpanel-${index}`}
            aria-labelledby={`vertical-tab-${index}`}
            style={{width: '100%'}}
            {...other}
        >
            {value === index && (
                <Box sx={{ p: 3}}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}
TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired,
};
function a11yProps(index) {
    return {
        id: `vertical-tab-${index}`,
        'aria-controls': `vertical-tabpanel-${index}`,
    };
}

const ItemTabsAccountDefault = ({title, content}) => {
    const matches = useMediaQuery('(max-width:899px)')

    return(
        <Grid item xs={6} sm={4} marginBottom='20px'>
            <Typography
                color='#616161'
                fontWeight='300'
                marginBottom='5px'
                fontSize={matches ? '13px' : '16px'}
            >
                {title}
            </Typography>
            <Typography
                color='#000'
                fontWeight='400'
                fontSize={matches ? '16px' : '22px'}
            >
                {content}
            </Typography>
        </Grid>
    )
}
const FormUpload = ({user, time, setStatus}) => {
    return (
        <form action="/upload" method="post" encType="multipart/form-data" id='formProfile'>
            <Grid container spacing={2} justifyContent={'space-between'} alignItems={'center'} textAlign={'center'}>
                <TextField sx={{color: '#000'}} label={'Login'} variant="outlined" value={user?.login}/>
                <TextField sx={{color: '#000'}} label={'Nick'} variant="outlined" value={user?.nick} />
                <Button variant="contained" component="Avatar">Choose a new avatar<input type="file" hidden/></Button>
                <ItemTabsAccountDefault title={'Status account'} content={user?.acl[1]}/>
                <ItemTabsAccountDefault title={'Account creation date'} content={time}/>
                <Grid item xs={12} md={4} display='flex' justifyContent={'center'} alignItems={'center'}>
                    <Button
                        style={{ color: '#1976d2'}}
                        fullWidth
                        type='submit'
                        marginRight='20px'
                    >
                        <SendAndArchiveIcon style={{marginRight: '5px'}}/>
                        Save
                    </Button>
                    <Button
                        style={{ color: '#1976d2'}}
                        fullWidth
                        onClick={() => setStatus(false)}
                        marginRight='20px'
                    >
                        <CancelIcon style={{marginRight: '5px'}}/>
                        Cancel
                    </Button>
                </Grid>
            </Grid>
        </form>
    )
}

const AccountDetails = ({user, time}) => {
    const [status, setStatus] = useState(false)

    return (
        !status ?
            <Grid container spacing={2} justifyContent={'space-between'} alignItems={'center'} textAlign={'center'}>
                <ItemTabsAccountDefault title={'Login'} content={user?.login}/>
                <ItemTabsAccountDefault title={'Nick'} content={user?.nick}/>
                <ItemTabsAccountDefault title={'Status account'} content={user?.acl[1]}/>
                <ItemTabsAccountDefault title={'Account creation date'} content={time}/>
                <ItemTabsAccountDefault title={'Avatar'}
                                 content={
                                     (user?.avatar && <img src={user?.avatar} alt={'User avatar'}/>) || 'Not installed'
                                 }
                />
                <Grid item xs={12} md={4}>
                    <Typography
                        sx={{cursor: 'pointer'}}
                        color={'#1976d2'}
                        display='flex'
                        justifyContent='center'
                        alignItems='center'
                        variant='h6'
                        onClick={() => setStatus(true)}
                    >
                        <ManageAccountsIcon style={{marginRight: '10px'}}/>
                        Edit data
                    </Typography>
                </Grid>
            </Grid> :
            <FormUpload user={user} time={time} setStatus={value => setStatus(value)}/>
    )
}


const ProfilePage = ({user = {}, authLogOut, userLogOut}) => {
    const matches = useMediaQuery('(max-width:899px)')
    const matches2 = useMediaQuery('(max-width:768px)')
    const [value, setValue] = useState(0)

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    let formattedTime = 0;
    if (Object.keys(user).length !== 0) {
        let date = new Date(+user.createdAt);
        let year = date.getFullYear();
        let month = "0" + date.getMonth();
        let day = "0" + date.getDate();
        let hours = "0" + date.getHours();
        let minutes = "0" + date.getMinutes();
        let seconds = "0" + date.getSeconds();
        formattedTime = day.substr(-2) + '.' + month.substr(-2) + '.' + year +
            ' ' + hours.substr(-2) + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    }

    return (
        Object.keys(user).length === 0 ? <Redirect to={'/my-account'}/> :
            <>
                <Header/>
                <Breadcrumb links={['Profile']}/>
                <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                    <Container maxWidth="lg">
                        <Box>
                            <Typography
                                variant='h5'
                                textAlign='center'
                                fontFamily='sarif'
                                marginBottom={matches ? '20px':'40px'}
                            >
                                LOGGED IN AS <strong>{user.login.toUpperCase()}</strong>
                            </Typography>
                        </Box>
                        <Box
                            sx={{ flexGrow: 1, bgcolor: '#fff', display: 'flex', height: '100%', alignItems: 'center'}}
                            flexDirection={matches2 ? 'column': "row"}
                        >
                            <Tabs
                                orientation={matches2 ? 'horizontal': "vertical"}
                                variant="scrollable"
                                value={value}
                                onChange={handleChange}
                                aria-label="Profile settings"
                                sx={{ borderRight: 1, borderColor: 'divider', padding: '50px 0', height: '100%'}}
                            >
                                <Tab sx={{padding: '0 50px', textAlign: 'center'}} label={'ACCOUNT DETAILS'} {...a11yProps(0)} />
                                <Tab sx={{padding: '0 50px', textAlign: 'center'}} label={'my orders'} {...a11yProps(1)} />
                                <Tab sx={{padding: '0 50px', textAlign: 'center'}} label={'wish list'} {...a11yProps(2)} />
                                <Button onClick={() => {authLogOut(); userLogOut()}}>Logout</Button>
                            </Tabs>
                            <TabPanel value={value} index={0}>
                                <AccountDetails user={user} time={formattedTime}/>
                            </TabPanel>
                            <TabPanel value={value} index={1}>
                                my orders
                            </TabPanel>
                            <TabPanel value={value} index={2}>
                                wish list
                            </TabPanel>
                        </Box>
                    </Container>
                </main>
                <Footer/>
            </>
    )
}
const CProfilePage = connect(state => ({user: state.user}), {authLogOut: actionAuthLogout, userLogOut: actionUserRemove})(ProfilePage)

export default CProfilePage