import { Image } from '@tarojs/components';

import { Arrow } from '@taroify/icons';
import classNames from 'classnames';
import React, { useCallback } from 'react';

import { cityValues } from '@/components/user-batch-publish';
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 GoBatchTag({ cityCode, jobId }: { cityCode: string; jobId: JobManageInfo['id'] }) {
  const handleClick = useCallback(
    e => {
      e.preventDefault();
      e.stopPropagation();
      navigateTo(PageUrl.GroupDelegatePublish, { cityCode, jobId });
    },
    [cityCode, jobId]
  );
  if (!cityValues.find(c => c.cityCode === cityCode)) {
    return null;
  }
  return (
    <div onClick={handleClick} className={`${PREFIX}__buy-tag-wrapper`}>
      <div className={`${PREFIX}__buy-tag`}>
        <Image className={`${PREFIX}__buy-tag-icon`} src="https://publiccdn.neighbourhood.com.cn/img/lightning.svg" />
        <div>加速招聘</div>
        <Arrow size={12} />
      </div>
    </div>
  );
}

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>
        <GoBatchTag cityCode={props.data.cityCode} jobId={props.data.id} />
      </div>
    </div>
  );
}

export default React.memo(JobManageCard);