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

export default () => {
  const [lightVisible, setLightVisible] = useState(false);
  const [darkVisible, setDarkVisible] = useState(false);
  const [left, setLeft] = useState(false);
  const [leftStart, setLeftStart] = useState(false);
  const [leftEnd, setLeftEnd] = useState(false);
  const [bottom, setBottom] = useState(false);
  const [bottomStart, setBottomStart] = useState(false);
  const [bottomEnd, setBottomEnd] = useState(false);
  const [top, setTop] = useState(false);
  const [topStart, setTopStart] = useState(false);
  const [topEnd, setTopEnd] = useState(false);
  const [offset, setOffset] = useState(false);

  return (
    <>
      <View className="group-title">基础用法</View>

      <BfPopover
        visible={lightVisible}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        theme="light"
        location="bottom-start"
        onClick={() => setLightVisible((pre) => !pre)}
        onOpen={() => {
          console.log('打开菜单时触发');
        }}
        onClose={() => {
          console.log('关闭菜单时触发');
        }}
      >
        <Button>明亮风格</Button>
      </BfPopover>

      <BfPopover
        visible={darkVisible}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="bottom-end"
        onClick={() => setDarkVisible((pre) => !pre)}
      >
        <Button>暗黑风格</Button>
      </BfPopover>

      <BfPopover
        visible={left}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="left"
        onClick={() => setLeft((pre) => !pre)}
      >
        <Button>left</Button>
      </BfPopover>

      <BfPopover
        visible={leftStart}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="left-start"
        onClick={() => setLeftStart((pre) => !pre)}
      >
        <Button>left-start</Button>
      </BfPopover>

      <BfPopover
        visible={leftEnd}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="left-end"
        onClick={() => setLeftEnd((pre) => !pre)}
      >
        <Button>left-end</Button>
      </BfPopover>

      <BfPopover
        visible={bottom}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="bottom"
        onClick={() => setBottom((pre) => !pre)}
      >
        <Button>bottom</Button>
      </BfPopover>

      <BfPopover
        visible={bottomStart}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="bottom-start"
        onClick={() => setBottomStart((pre) => !pre)}
      >
        <Button>bottom-start</Button>
      </BfPopover>

      <BfPopover
        visible={bottomEnd}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="bottom-end"
        onClick={() => setBottomEnd((pre) => !pre)}
      >
        <Button>bottom-end</Button>
      </BfPopover>

      <BfPopover
        visible={top}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="top"
        onClick={() => setTop((pre) => !pre)}
      >
        <Button>top</Button>
      </BfPopover>

      <BfPopover
        visible={topStart}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="top-start"
        onClick={() => setTopStart((pre) => !pre)}
      >
        <Button>top-start</Button>
      </BfPopover>

      <BfPopover
        visible={topEnd}
        content={
          <View style={{ padding: 20 }}>
            <View>达成范围：90-100%</View>
            <View>低于90%则为0，高于100%为100%</View>
          </View>
        }
        location="top-end"
        onClick={() => setTopEnd((pre) => !pre)}
      >
        <Button>top-end</Button>
      </BfPopover>

      <View />

      <BfCard
        title="标题"
        content={
          <>
            <BfPopover
              visible={offset}
              content={
                <View style={{ padding: 20 }}>
                  <View>达成范围：90-100%</View>
                  <View>低于90%则为0，高于100%为100%</View>
                </View>
              }
              location="bottom-start"
              offset={[-12, 7]}
              onClick={() => setOffset((pre) => !pre)}
            >
              <Button>设置偏移</Button>
            </BfPopover>
            <View>123123</View>
            <View>123123</View>
            <View>123123</View>
            <View>123123</View>
            <View>123123</View>
          </>
        }
      />

      <View>这里是文字这里是文字这里是文字</View>
      <View>这里是文字这里是文字这里是文字</View>
      <View>这里是文字这里是文字这里是文字</View>
    </>
  );
};