import { BfPopup } from '@bud-fe/react-taro-ui';
import { Button, View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [visible, setVisible] = useState(false);
  const [showTop, setShowTop] = useState(false);
  const [showBottom, setShowBottom] = useState(false);
  const [showLeft, setShowLeft] = useState(false);
  const [showRight, setShowRight] = useState(false);

  return (
    <>
      <View className="group-title">基础用法</View>
      <Button onClick={() => setVisible(true)}>显示</Button>

      <View className="group-title">弹出位置</View>
      <Button onClick={() => setShowTop(true)}>顶部弹出</Button>
      <Button onClick={() => setShowBottom(true)}>底部弹出</Button>
      <Button onClick={() => setShowLeft(true)}>左侧弹出</Button>
      <Button onClick={() => setShowRight(true)}>右侧弹出</Button>

      <BfPopup visible={visible} style={{ padding: 30 }} onClose={() => setVisible(false)}>
        正文
      </BfPopup>
      <BfPopup visible={showTop} style={{ height: '20%' }} position="top" onClose={() => setShowTop(false)} />
      <BfPopup visible={showBottom} style={{ height: '20%' }} position="bottom" onClose={() => setShowBottom(false)} />
      <BfPopup
        visible={showLeft}
        style={{ width: '50%', height: '100%' }}
        position="left"
        onClose={() => setShowLeft(false)}
      />
      <BfPopup
        visible={showRight}
        style={{ width: '50%', height: '100%' }}
        position="right"
        onClose={() => setShowRight(false)}
      />
    </>
  );
};