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

import { Popup } from '@taroify/core';
import { useCallback } from 'react';

import { BindPhoneStatus } from '@/components/login-button';
import PhoneButton from '@/components/phone-button';
import { ProtocolPrivacy } from '@/components/protocol-privacy';
import SafeBottomPadding from '@/components/safe-bottom-padding';

import './index.less';

interface IProps {
  open: boolean;
  onCancel: () => void;
  onConfirm: () => void;
  needPhone?: boolean;
}

const PREFIX = 'agreement-popup';

export function AgreementPopup({ open, onCancel, onConfirm, needPhone }: IProps) {
  const handleBindPhone = useCallback(
    status => {
      if (status === BindPhoneStatus.Success) {
        onConfirm();
      } else {
        onCancel();
      }
    },
    [onCancel, onConfirm]
  );

  if (!open) {
    return null;
  }

  return (
    <Popup rounded className={PREFIX} placement="bottom" open={open} onClose={onCancel}>
      <div className={`${PREFIX}__content`}>
        <div className={`${PREFIX}__title`}>提示</div>
        <div className={`${PREFIX}__body`}>
          <div>你好，以下是播络隐私协议与用户协议</div>
          <div>同意后可使用全部功能，不同意你也可以浏览</div>
        </div>
        <ProtocolPrivacy divider />
        <div className={`${PREFIX}__btn-group`}>
          <Button className={`${PREFIX}__cancel-button`} onClick={onCancel}>
            拒绝
          </Button>
          {needPhone ? (
            <PhoneButton className={`${PREFIX}__confirm-button`} needPhone onBindPhone={handleBindPhone}>
              同意
            </PhoneButton>
          ) : (
            <Button className={`${PREFIX}__confirm-button`} onClick={onConfirm}>
              同意
            </Button>
          )}
        </div>
      </div>
      <SafeBottomPadding />
    </Popup>
  );
}