import classNames from 'classnames';
import React, { useCallback } from 'react';

import { PageUrl } from '@/constants/app';
import { JOB_MANAGE_STATUS_TITLE_MAP, JobManageStatus } from '@/constants/job';
import { JobManageInfo } from '@/types/job';
import { getJobLocation } from '@/utils/job';
import { navigateTo } from '@/utils/route';

import './index.less';

interface IProps {
  data: JobManageInfo;
  className?: string;
}

const PREFIX = 'job-manage-card';

const STATUS_CLASS_MAP = {
  [JobManageStatus.WaitVerify]: 'pending',
  [JobManageStatus.Open]: 'open',
  [JobManageStatus.Pending]: 'pending',
  [JobManageStatus.Error]: 'error',
  [JobManageStatus.Close]: 'close',
  [JobManageStatus.Expire]: 'close',
};

function JobManageCard(props: IProps) {
  const { data = {} } = props;
  const { id, title, status } = data as JobManageInfo;

  const handleClick = useCallback(() => {
    navigateTo(PageUrl.JobDetail, { id });
  }, [id]);

  return (
    <div className={PREFIX} onClick={handleClick}>
      <div className={`${PREFIX}__info`}>
        <div className={`${PREFIX}__info__title`}>{title}</div>
        <div className={`${PREFIX}__info__location`}>{getJobLocation(data as JobManageInfo)}</div>
      </div>
      <div className={classNames(`${PREFIX}__status`, { [STATUS_CLASS_MAP[status]]: true })}>
        <div>{JOB_MANAGE_STATUS_TITLE_MAP[status]}</div>
      </div>
    </div>
  );
}

export default React.memo(JobManageCard);