import { memo, useMemo } from 'react';
import type { MouseEventHandler, ReactNode } from 'react';
import type { WrapperType } from 'react-svg';
import clsx from 'clsx';
import isEmpty from 'lodash/isEmpty';

import MuiTooltip, { TooltipProps } from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';

import { Avatar } from '../avatar';
import type { AvatarProps } from '../avatar';
import { CustomIcon } from '../custom-icon';
import { TextWithTooltip } from '../text-with-tooltip';
import type { Theme } from '../@styles/theme-provider';

const StyledRoot = styled('div')(({ theme }: { theme: Theme }) => ({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'nowrap',
  width: '100%',
  '& .memberAvatar': {
    margin: theme.spacing(0.5, 1, 0.5, 0),
    color: theme.palette.common.white // not verified
  }
}));

const StyledTextsContainer = styled('div')(({ theme }: { theme: Theme }) => ({
  display: 'flex',
  flexBasis: 0,
  flexDirection: 'column',
  flexGrow: 1,
  flexWrap: 'wrap',
  justifyContent: 'center',
  width: '100%',
  maxWidth: '100%',
  '& .titleContainer': {
    display: 'flex',
    alignItems: 'center'
  },
  '& .memberTitle': {
    ...theme.typography.interactive1,
    color: theme.palette.primary[500]
  },
  '& .memberDescription': {
    ...theme.typography.caption1,
    color: theme.palette.primary[400],
    textAlign: 'start'
  },
  '& .memberLabel': {
    ...theme.typography.interactive2,
    color: theme.palette.primary[500],
    marginLeft: theme.spacing(1.5),
    whiteSpace: 'nowrap'
  }
}));

const StyledIconsContainer = styled('div')(({ theme }: { theme: Theme }) => ({
  height: theme.spacing(2),
  paddingTop: theme.spacing(0.5),
  '& .memberIcon': {
    paddingRight: theme.spacing(1),
    paddingBottom: theme.spacing(1),
    width: theme.spacing(2.25),
    height: theme.spacing(2.25),
    color: theme.palette.primary[400],
    cursor: 'pointer'
  }
}));

export interface MemberProps {
  /**
   * Will be used as title.
   */
  fullName: TooltipProps['title'];
  /**
   * Will be used as subtitle.
   */
  description?: string;
  /**
   * Any react component to be used as a label/tag.
   */
  label?: ReactNode;
  /**
   * Props which will be passed into the avatar component.
   */
  avatarProps?: AvatarProps;
  /**
   * Text for the tooltip if the user was deleted.
   */
  avatarTooltipText?: string;
  /**
   * Flag for showing of the tooltip on the avatar component.
   */
  showAvatarTooltip?: boolean | (() => boolean);
  /**
   * Array of icons which should have click handlers.
   */
  icons?: {
    src: string;
    clickHandler: MouseEventHandler<WrapperType>;
    dataTestId?: string;
  }[];
  /**
   * Custom class name in case you need to add custom styles to the component.
   */
  className?: string;
}

const Member = (props: MemberProps) => {
  const {
    avatarProps,
    icons,
    fullName,
    description,
    label,
    avatarTooltipText,
    showAvatarTooltip,
    className
  } = props;

  const memberAvatarProps = useMemo(
    () =>
      ({
        'data-testid': 'memberAvatar',
        color: 'inherit',
        size: 'small',
        ...avatarProps,
        className: clsx('memberAvatar', avatarProps?.className)
      } as AvatarProps),
    [avatarProps]
  );

  return (
    <StyledRoot className={className}>
      {!isEmpty(avatarProps) &&
        (showAvatarTooltip && avatarTooltipText ? (
          <MuiTooltip title={avatarTooltipText}>
            <Avatar {...memberAvatarProps} />
          </MuiTooltip>
        ) : (
          <Avatar {...memberAvatarProps} />
        ))}
      <StyledTextsContainer>
        <div className="titleContainer">
          <TextWithTooltip
            disableInteractive={false}
            text={fullName}
            numOfLines={1}
            textClassName="memberTitle"
          />
          {label && <div className="memberLabel">{label}</div>}
        </div>
        {description && (
          <TextWithTooltip
            disableInteractive={false}
            text={description}
            numOfLines={1}
            textClassName="memberDescription"
          />
        )}
        {icons?.length !== 0 && (
          <StyledIconsContainer>
            {icons?.map(icon => {
              const { src, clickHandler, dataTestId } = icon;
              return (
                <CustomIcon
                  data-testid={dataTestId}
                  key={src}
                  src={src}
                  role="button"
                  onClick={clickHandler}
                  className="memberIcon"
                />
              );
            })}
          </StyledIconsContainer>
        )}
      </StyledTextsContainer>
    </StyledRoot>
  );
};

Member.defaultProps = {
  icons: [],
  avatarProps: {},
  label: '',
  description: '',
  avatarTooltipText: '',
  showAvatarTooltip: false
};

const m = memo(Member);
export { m as Member };