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

interface Props {
  user: User;
  posts: PostAuth[];
  canEdit?: boolean;
}

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

  const { t } = useTranslation();

  return (
    <Grid container sx={{ justifyContent: 'center', marginTop: 0 }} spacing={2}>
      <Grid item>
        <Card>
          <CardContent>
            <Grid container spacing={2}>
              <Grid item sx={{ display: 'flex', flexGrow: 1, justifyContent: 'center' }}>
                <IconButton onClick={() => setImageOpen(true)}>
                  <Avatar alt={user.username} src={`${user.image}`} sx={{ width: '100px', height: '100px' }}>
                    <Person sx={{ width: '60px', height: '60px' }} />
                  </Avatar>
                </IconButton>
              </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>
                <UserEditDialog user={user} open={editOpen} onClose={() => setEditOpen(false)} />
                <UserImageDialog user={user} open={imageOpen} onClose={() => setImageOpen(false)} />
              </>
            )}
          </CardActions>
        </Card>
      </Grid>
      <Grid item xs={12}>
        <Divider variant="middle">
          <Typography sx={{ opacity: 0.36 }}>{t('Recent posts')}</Typography>
        </Divider>
      </Grid>
      {posts.map((post) => (
        <Grid key={`post_${post.id}`} item xs={12}>
          <Post post={post} disableActions />
        </Grid>
      ))}
    </Grid>
  );
};

export default Profile;