import { Checkbox } from '@taroify/core';
import classNames from 'classnames';
import React, { useCallback } from 'react';

import { PageUrl } from '@/constants/app';
import { navigateTo } from '@/utils/route';

import './index.less';

interface IProps {
  className?: string;
  divider?: boolean;
}

interface IPropWithCheckbox {
  className?: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
}

const PREFIX = 'protocol-privacy';
const PREFIX_CHECKBOX = `${PREFIX}__checkbox`;

export function ProtocolPrivacy(props: IProps) {
  const { className, divider = false } = props;

  const handleClickProtocol = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
    navigateTo(PageUrl.ProtocolWebview);
  }, []);

  const handleClickPrivacy = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
    navigateTo(PageUrl.PrivacyWebview);
  }, []);

  return (
    <div className={classNames(PREFIX, `${PREFIX}__need-margin`, className)}>
      <div onClick={handleClickPrivacy}>隐私协议</div>
      {divider && <div>·</div>}
      <div onClick={handleClickProtocol} className={classNames({ [`${PREFIX}__need-margin`]: !divider })}>
        用户协议
      </div>
    </div>
  );
}

export function ProtocolPrivacyCheckbox(props: IPropWithCheckbox) {
  const { className, checked, onChange } = props;

  return (
    <Checkbox
      className={classNames(PREFIX_CHECKBOX, className)}
      checked={checked}
      onChange={onChange}
      shape="square"
      size={14}
    >
      <div>我已阅读并同意 </div>
      <ProtocolPrivacy />
    </Checkbox>
  );
}
