import { type FC, Fragment } from 'react';
import { Link as RouterLink } from 'react-router-dom';

import Divider from '@material-hu/mui/Divider';
import Link from '@material-hu/mui/Link';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { BUNNY_IMAGE_CLASSES } from 'src/pages/dashboard/Conversations/constants';
import { type Member } from 'src/pages/dashboard/Conversations/types';
import { profileRoutes } from 'src/pages/dashboard/profile/routes';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getInitials } from 'src/utils/userUtils';

import LazySecureImage from '../../shared/LazySecureImage';

import MembersActionsMenu from './ConversationsEdit/MembersActionsMenu';

type MemberListProps = {
  members: Member[];
  channelId: string;
  isAdmin: boolean;
  userId: number | undefined;
};

const MembersList: FC<MemberListProps> = props => {
  const { members, channelId, isAdmin, userId } = props;
  const theme = useTheme();
  const { t } = useLokaliseTranslation('chat');

  const getUserName = (user: Member) => {
    if (user.id === userId) {
      return t('you');
    }
    return `${user.first_name} ${user.last_name}`;
  };
  return (
    <>
      {!!members.length &&
        members.map((elem, index) => (
          <Fragment key={elem.id}>
            <Stack
              sx={{
                my: 2,
                flexDirection: 'row',
                width: '100%',
                justifyContent: 'space-between',
              }}
            >
              <Link
                component={RouterLink}
                to={profileRoutes.profile(elem.id)}
                sx={{
                  textDecoration: 'none',
                  fontWeight: 'bold',
                  transition: 'color 0.2s',
                  pointerEvents: elem.id === userId ? 'none' : 'auto',
                }}
              >
                <Stack
                  sx={{
                    flexDirection: 'row',
                    gap: 1,
                    alignItems: 'center',
                  }}
                >
                  <LazySecureImage
                    url={elem.picture_asset_url}
                    isAvatar
                    imageClass={BUNNY_IMAGE_CLASSES.AVATAR}
                    avatarProps={{
                      text: getInitials(`${elem.first_name} ${elem.last_name}`),
                    }}
                  />
                  <Typography
                    variant="globalS"
                    fontWeight="fontWeightSemiBold"
                    sx={{
                      '&:hover':
                        elem.id === userId
                          ? {}
                          : {
                              textDecoration: 'underline',
                              color: theme.palette.new.text.neutral.default,
                            },
                    }}
                  >
                    {getUserName(elem)}
                  </Typography>
                </Stack>
              </Link>
              <MembersActionsMenu
                userToModify={elem}
                channelId={channelId}
                isAdmin={isAdmin}
              />
            </Stack>
            {index !== members.length - 1 && <Divider />}
          </Fragment>
        ))}
    </>
  );
};

export default MembersList;
