import { Person } from '@mui/icons-material';
import { Avatar, Box, Button, Card, CardActions, CardContent, Divider, Grid, Typography } from '@mui/material';
import { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { User } from '../../types/User';
import convertDate from '../../utils/date';
import UserEditDialog from '../Dialogs/UserEdit/UserEditDialog';

interface Props {
  user: User;
  canEdit?: boolean;
}

const Profile: FC<Props> = ({ user, canEdit }) => {
  const [editOpen, setEditOpen] = useState(false);

  const { t } = useTranslation();

  return (
    <Grid container sx={{ justifyContent: 'center' }} spacing={2}>
      <Grid item>
        <Card>
          <CardContent>
            <Grid container spacing={2}>
              <Grid item sx={{ display: 'flex', flexGrow: 1, justifyContent: 'center' }}>
                <Avatar alt={user.username} src={`storage/${user.image}`} sx={{ width: '100px', height: '100px' }}>
                  <Person sx={{ width: '60px', height: '60px' }} />
                </Avatar>
              </Grid>
              <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
                <Box sx={{ display: 'grid', gridTemplateColumns: '120px 1fr', columnGap: 1 }}>
                  <Typography fontWeight="bold">{t('Username')}:</Typography>
                  <Typography>{user.username}</Typography>
                  <Typography fontWeight="bold">{t('Email')}:</Typography>
                  <Typography>{user.email}</Typography>
                  <Typography fontWeight="bold">{t('Member since')}:</Typography>
                  <Typography>{convertDate(user.memberSince)}</Typography>
                  <Typography fontWeight="bold">{t('Post count')}:</Typography>
                  <Typography>{user.postCount}</Typography>
                </Box>
              </Grid>
            </Grid>
          </CardContent>
          <CardActions>
            {canEdit && (
              <Button size="small" onClick={() => setEditOpen(true)}>
                {t('Edit')}
              </Button>
            )}
          </CardActions>
          <UserEditDialog user={user} open={editOpen} onClose={() => setEditOpen(false)} />
        </Card>
      </Grid>
      <Grid item xs={12}>
        <Divider variant="middle">
          <Typography sx={{ opacity: 0.36 }}>{t('Recent posts')}</Typography>
        </Divider>
      </Grid>
    </Grid>
  );
};

export default Profile;