import { useCallback } from 'react';

import { IBaseMessageProps } from '@/components/message-chat/base';
import { PageUrl } from '@/constants/app';
import { MaterialViewSource } from '@/constants/material';
import { IMaterialMessage } from '@/types/message';
import { getScrollItemId, safeJsonParse } from '@/utils/common';
import { getBasicInfo } from '@/utils/material';
import { navigateTo } from '@/utils/route';

import './index.less';

interface IProps extends IBaseMessageProps {}

const PREFIX = 'material-message';

function MaterialMessage(props: IProps) {
  const { id, message } = props;
  const data = safeJsonParse<IMaterialMessage>(message.actionObject, null);

  const handleClick = useCallback(() => {
    if (!data) {
      return;
    }
    navigateTo(PageUrl.MaterialView, { resumeId: data.id, source: MaterialViewSource.Chat });
  }, [data]);

  if (!data) {
    return null;
  }

  return (
    <div className={PREFIX} id={getScrollItemId(id)} onClick={handleClick}>
      <div className={`${PREFIX}__name`}>{data.name}</div>
      <div className={`${PREFIX}__basic`}>{getBasicInfo(data)}</div>
      <div className={`${PREFIX}__categories`}>{`播过 ${data.workedSecCategoryStr}`}</div>
    </div>
  );
}

export default MaterialMessage;
