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

import { Dialog } from '@taroify/core';

import './index.less';

const PREFIX = 'message-dialog';
const HELP = `${PREFIX}__help`;
const NO_TIMES = `${PREFIX}__no-times`;

interface IHelpProps {
  open: boolean;
  onClose: () => void;
}

interface INoTimesProps {
  open: boolean;
  times: number;
  onClick: () => void;
  onClose: () => void;
}

export function MessageHelpDialog(props: IHelpProps) {
  const { open, onClose } = props;

  return (
    <Dialog onClose={onClose} open={open}>
      <Dialog.Content>
        <div className={HELP}>
          <div className={`${HELP}__title`}>消息通知次数说明</div>
          <div className={`${HELP}__body`}>
            <div className={`${HELP}__tips`}>
              {`离开小程序后，如果有用户向你发送消息，我们将通过微信的"服务通知"提醒你。\n由于微信服务通知有次数限制，次数使用完则无法收到通知。`}
            </div>
            <div className={`${HELP}__tips`}>
              <div className="highlight">通知次数</div>
              代表你还能接收服务通知的次数
            </div>
            <div className={`${HELP}__tips`}>
              <div className="highlight">点击增加</div>
              可以为你增加通知次数
            </div>
          </div>
          <Button className={`${HELP}__btn`} onClick={onClose}>
            知道了
          </Button>
        </div>
      </Dialog.Content>
    </Dialog>
  );
}

export function MessageNoTimesDialog(props: INoTimesProps) {
  const { open, times = 0, onClick, onClose } = props;

  return (
    <Dialog className={NO_TIMES} onClose={onClose} open={open}>
      <Dialog.Content>
        <div className={`${NO_TIMES}__title`}>未读消息提醒次数不够了！</div>
        <div className={`${NO_TIMES}__tips`}>有通知次数才能<span className="highlight">及时收到</span>招聘邀请，快点击“点我增加”吧～</div>
        <div className={`${NO_TIMES}__body`}>
          <div className={`${NO_TIMES}__times`}>{`未读消息提醒剩余：${times}次`}</div>
          <Button className={`${NO_TIMES}__btn`} onClick={onClick}>
            点我增加
          </Button>
        </div>
      </Dialog.Content>
    </Dialog>
  );
}