import { Button } from '@taroify/core';
import classNames from 'classnames';
import { ReactElement } from 'react';

import Badge from '@/components/badge';
import { DialogStatus, PREFIX } from '@/components/product-dialog/const';

interface IContactDirectProps {
  status: DialogStatus;
  publisherAcctNo: string;
  imGroupNick: string;
  inviteTime?: number;
  onConfirm: (status: DialogStatus) => void;
}

export default function ContactWithGroup(props: IContactDirectProps) {
  const { status, publisherAcctNo, inviteTime, onConfirm } = props;

  const handleConfirm = async () => {
    onConfirm(status);
  };

  let describe: ReactElement | null = null;
  let buttonText = '确定';
  let badge: ReactElement | null = null;
  if (status === DialogStatus.JOB_CONTACT_INVITE_GROUP) {
    describe = (
      <div className={classNames(`${PREFIX}__job-contact-with-group__describe`)}>
        <div>您还剩</div>
        <div className="highlight">{`${inviteTime}次对接`}</div>
        <div>机会</div>
      </div>
    );
  } else if (status === DialogStatus.JOB_CONTACT_NEED_BUY_GROUP) {
    describe = (
      <div className={classNames(`${PREFIX}__job-contact-with-group__describe`)}>
        <div>您的人工对接机会</div>
        <div className="highlight">已用完</div>
      </div>
    );
  }

  if (status === DialogStatus.JOB_CONTACT_INVITE_GROUP) {
    buttonText = '帮我对接';
  } else if (status === DialogStatus.JOB_CONTACT_NEED_BUY_GROUP) {
    buttonText = '购买对接次数';
  }

  if (status === DialogStatus.JOB_CONTACT_NEED_BUY_GROUP) {
    badge = <Badge text="限时折扣" />;
  }

  return (
    <div className={`${PREFIX}__job-contact-with-group`}>
      <div className={`${PREFIX}__job-contact-with-group__header`}>该通告需要播络帮你对接</div>
      <div className={`${PREFIX}__job-contact-with-group__content`}>
        <div>{`发布人昵称: ${publisherAcctNo}`}</div>
      </div>
      {describe}
      <div className={`${PREFIX}__job-contact-with-group__button-container`}>
        <Button className={`${PREFIX}__job-contact-with-group__button`} onClick={handleConfirm}>
          {buttonText}
        </Button>
        {badge}
      </div>
    </div>
  );
}
