import type { FC } from 'react';

import Chip from '@material-hu/mui/Chip';
import { grey } from '@material-hu/mui/colors';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { FormListItem } from 'src/types/forms';
import { User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';

import RegularChatName from 'src/components/dashboard/chat/ChatName/RegularChatName';

export type FormChatNameProps = {
  title: string;
  formData?: FormListItem;
  otherUser?: User;
  status?: string;
  withProgressStatus?: boolean;
};

export const FormChatName: FC<FormChatNameProps> = props => {
  const { formData, otherUser, title, status, withProgressStatus } = props;

  const { t } = useLokaliseTranslation('forms');

  return (
    <Stack
      sx={{
        width: '100%',
        flexDirection: 'row',
        alignItems: 'flex-start',
        gap: 2,
      }}
    >
      <Stack sx={{ alignItems: 'flex-start' }}>
        <Typography
          component="span"
          variant="subtitle2"
          sx={theme => ({ color: theme.palette.new.text.neutral.default })}
        >
          {title || formData?.title}
        </Typography>
        <Typography
          component="span"
          gutterBottom
          variant="body2"
          sx={theme => ({ color: theme.palette.new.text.neutral.lighter })}
        >
          {`#${formData?.id}`}
        </Typography>
        {otherUser && (
          <RegularChatName
            otherUser={otherUser}
            color="info.dark"
            sx={{ ml: '0 !important' }}
          />
        )}
      </Stack>
      {withProgressStatus && (
        <Chip
          label={t(status!)}
          color="secondary"
          size="small"
          sx={{ backgroundColor: grey[500] }}
        />
      )}
      {formData?.approvalStatus && formData.type === 'FORM' && (
        <Chip
          color="primary"
          label={t('NO_NEED_APPROVAL')}
          size="small"
          sx={{
            maxWidth: 'max-content',
            backgroundColor: formData.approvalStatusColor,
            width: '100%',
            mb: 0.5,
          }}
        />
      )}
    </Stack>
  );
};

export default FormChatName;