import React from 'react';
import { isEmpty } from '../utils/vehicle';
import { ExpireDate } from './ExpireDate';

const BLOCK_DELIVERY_TITLE = '未维护行驶证检验有效期，禁止交车';

interface InspectExpireCellProps {
  expireDate: string;
  emptyLabel?: string;
  onClickNotUploaded?: () => void;
  alwaysShowRemainder?: boolean;
}

export function InspectExpireCell({
  expireDate,
  emptyLabel = '—',
  onClickNotUploaded,
  alwaysShowRemainder = false,
}: InspectExpireCellProps) {
  if (isEmpty(expireDate)) {
    return (
      <span className="vm-expire">
        {onClickNotUploaded ? (
          <button
            type="button"
            className="vm-link vm-expire-date"
            onClick={onClickNotUploaded}
            title="前往证照管理维护行驶证检验有效期"
          >
            未上传
          </button>
        ) : (
          <span className="vm-expire-date">未上传</span>
        )}
        <span className="vm-expire-tag danger" title={BLOCK_DELIVERY_TITLE}>
          禁止交车
        </span>
      </span>
    );
  }
  return (
    <ExpireDate
      date={expireDate}
      emptyLabel={emptyLabel}
      alwaysShowRemainder={alwaysShowRemainder}
    />
  );
}
