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

import { Dialog } from '@taroify/core';
import { useCallback, useState } from 'react';

import PhoneButton, { IPhoneButtonProps } from '@/components/phone-button';
import { ProtocolPrivacyCheckbox } from '@/components/protocol-privacy';
import Toast from '@/utils/toast';

import './index.less';

interface IProps {
  title?: string;
  onCancel: () => void;
  needPhone?: IPhoneButtonProps['needPhone'];
  onSuccess?: IPhoneButtonProps['onSuccess'];
  onBindPhone?: IPhoneButtonProps['onBindPhone'];
}

const PREFIX = 'login-dialog';

export default function LoginDialog(props: IProps) {
  const { title = '使用播络服务前，请先登录', needPhone, onSuccess, onCancel, onBindPhone } = props;
  const [checked, setChecked] = useState(false);

  const handleTipCheck = useCallback(() => {
    Toast.info('请先阅读并同意协议');
  }, []);

  return (
    <Dialog open onClose={onCancel}>
      <Dialog.Content>
        <div className={`${PREFIX}__container`}>
          <div className={`${PREFIX}__title`}>{title}</div>
          {!checked && (
            <Button className={`${PREFIX}__confirm-button`} onClick={handleTipCheck}>
              登录
            </Button>
          )}
          {checked && (
            <PhoneButton
              className={`${PREFIX}__confirm-button`}
              onSuccess={onSuccess}
              onBindPhone={onBindPhone}
              needPhone={needPhone}
            >
              登录
            </PhoneButton>
          )}
          <Button className={`${PREFIX}__cancel-button`} onClick={onCancel}>
            跳过，暂不登录
          </Button>
          <ProtocolPrivacyCheckbox checked={checked} onChange={setChecked} className={`${PREFIX}__checkbox`} />
        </div>
      </Dialog.Content>
    </Dialog>
  );
}