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

import classNames from 'classnames';
import { ReactElement } from 'react';

import { PREFIX } from '@/components/product-dialog/const';
import QrCode from '@/components/qr-code';
import { QrCodeType } from '@/constants/product';

interface IProps {
  type: QrCodeType;
  onClickCopy?: () => void;
}

export default function QrCodeContent(props: IProps) {
  const { type, onClickCopy } = props;

  let header: ReactElement | string | null = null;
  let describe: ReactElement | string | null = null;
  let footer: ReactElement | string | null = null;

  if (type === QrCodeType.ConnectCustomerService) {
    header = <div className="highlight">复制对接信息，发送给小二</div>;
    describe = (
      <Button className={`${PREFIX}__qr-code__copy-button`} onClick={onClickCopy}>
        复制对接信息
      </Button>
    );
    footer = '在微信聊天框长按即可粘贴已复制内容';
  } else if (type === QrCodeType.PublishJob) {
    header = (
      <>
        <Image
          mode="aspectFit"
          className={`${PREFIX}__qr-code__copy-icon`}
          src={require('@/statics/svg/success-circle-fill.svg')}
        />
        <div className={`${PREFIX}__qr-code__copy-success`}>您已支付</div>
      </>
    );
    describe = (
      <div className={`${PREFIX}__qr-code__steps`}>
        <div className={`${PREFIX}__qr-code__step`}>
          <div className={`${PREFIX}__qr-code__step-number`}>1</div>
          <div className={`${PREFIX}__qr-code__step-title`}>扫码二维码联系专属客服</div>
        </div>
        <div className={`${PREFIX}__qr-code__step-line`} />
        <div className={`${PREFIX}__qr-code__step`}>
          <div className={`${PREFIX}__qr-code__step-number`}>2</div>
          <div className={classNames(`${PREFIX}__qr-code__step-title`, 'highlight')}>发送付款截图</div>
        </div>
      </div>
    );
    footer = (
      <div className={`${PREFIX}__qr-code__tips-footer`}>
        <div className="divider" />
        <div className="tips">{`客服工作时间：工作日9:30-18:00\n上班后会第一时间为您处理`}</div>
      </div>
    );
  }

  return (
    <div className={`${PREFIX}__qr-code`}>
      <div className={`${PREFIX}__qr-code__header`}>{header}</div>
      {describe}
      <QrCode className={`${PREFIX}__qr-code__image`} type={type} />
      <div className={`${PREFIX}__qr-code__tips`}>长按并识别二维码，添加好友</div>
      <div className={`${PREFIX}__qr-code__footer`}>{footer}</div>
    </div>
  );
}