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

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

import { ProtocolPrivacyCheckbox } from '@/components/protocol-privacy';
import Toast from '@/utils/toast';

import './index.less';

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

const PREFIX = 'location-dialog';

export default function LocationDialog(props: IProps) {
  const { open, onClick, onClose } = props;
  const [checked, setChecked] = useState(false);

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

  return (
    <Dialog open={open} onClose={onClose}>
      <Dialog.Content>
        <div className={`${PREFIX}__container`}>
          <div className={`${PREFIX}__title`}>{`我们需要获取您的位置信息\n以便推荐附近的通告或主播`}</div>
          {!checked && (
            <Button className={`${PREFIX}__confirm-button`} onClick={handleTipCheck}>
              授权
            </Button>
          )}
          {checked && (
            <Button className={`${PREFIX}__confirm-button`} onClick={onClick}>
              授权
            </Button>
          )}
          <ProtocolPrivacyCheckbox checked={checked} onChange={setChecked} className={`${PREFIX}__checkbox`} />
        </div>
      </Dialog.Content>
    </Dialog>
  );
}
