import React, { useState } from 'react';
import { Dimensions, ScrollView, Text, View } from 'react-native';
import { Popup, Button, Space } from '@xrnjs/ui';
import Card from '_global/Card';
import styles from './style';

const Positions = () => {
  const [visibleBottom, setVisibleBottom] = useState<boolean>(false);
  const [visibleTop, setVisibleTop] = useState<boolean>(false);
  const [visibleLeft, setVisibleLeft] = useState<boolean>(false);
  const [visibleRight, setVisibleRight] = useState<boolean>(false);
  const [visibleRight2, setVisibleRight2] = useState<boolean>(false);
  const [visibleCenter, setVisibleCenter] = useState<boolean>(false);

  return (
    <ScrollView>
      <Space>
        <Card>
          <Text style={styles.cardTitle}>底部弹出</Text>
          <Popup
            visible={visibleBottom}
            position="bottom"
            round
            safeAreaInsetBottom
            onPressOverlay={() => setVisibleBottom(false)}
          >
            <View style={styles.colorWrapper}>
              <Text style={styles.text}>从底部弹出的内容</Text>
            </View>
          </Popup>
          <Button onPress={() => setVisibleBottom(true)}>底部弹出</Button>
        </Card>

        <Card>
          <Text style={styles.cardTitle}>顶部弹出</Text>
          <Popup
            visible={visibleTop}
            position="top"
            safeAreaInsetTop
            onPressOverlay={() => setVisibleTop(false)}
          >
            <View style={styles.colorWrapper}>
              <View style={styles.contentContainer}>
                <Text style={styles.text}>从顶部弹出的内容</Text>
              </View>
            </View>
          </Popup>
          <Button onPress={() => setVisibleTop(true)}>顶部弹出</Button>
        </Card>

        <Card>
          <Text style={styles.cardTitle}>左侧弹出</Text>
          <Popup
            visible={visibleLeft}
            position="left"
            safeAreaInsetBottom
            safeAreaInsetTop
            onPressOverlay={() => setVisibleLeft(false)}
          >
            <View style={styles.wrapper}>
              <View style={styles.contentContainer}>
                <Text style={styles.text}>从左侧弹出的内容</Text>
              </View>
            </View>
          </Popup>
          <Button onPress={() => setVisibleLeft(true)}>左侧弹出</Button>
        </Card>

        <Card>
          <Text style={styles.cardTitle}>右侧弹出</Text>
          <Popup
            visible={visibleRight}
            position="right"
            safeAreaInsetBottom
            safeAreaInsetTop
            onPressOverlay={() => setVisibleRight(false)}
          >
            <View style={styles.wrapper}>
              <View style={styles.contentContainer}>
                <Text style={styles.text}>从右侧弹出的内容</Text>
              </View>
            </View>
          </Popup>
          <Button onPress={() => setVisibleRight(true)}>右侧弹出</Button>
        </Card>

        <Card>
          <Text style={styles.cardTitle}>右侧弹出（自适应高度）</Text>
          <Popup
            visible={visibleRight2}
            position="right"
            statusBarTranslucent={false}
            safeAreaInsetBottom
            safeAreaInsetTop
            onPressOverlay={() => setVisibleRight2(false)}
          >
            <View
              style={{
                flex: 1,
                width: Dimensions.get('window').width * 0.8,
              }}
            >
              <View style={{ padding: 10 }}>
                <Text style={styles.text}>这是顶部内容</Text>
              </View>
              <View
                style={{ flex: 1, backgroundColor: '#f5f5f5', padding: 10 }}
              >
                <Text>这是中间的内容</Text>
              </View>
              <View style={{ padding: 10 }}>
                <Text style={styles.text}>这是底部内容</Text>
              </View>
            </View>
          </Popup>
          <Button onPress={() => setVisibleRight2(true)}>右侧弹出</Button>
        </Card>

        <Card>
          <Text style={styles.cardTitle}>中心弹出</Text>
          <Popup
            visible={visibleCenter}
            position="center"
            onPressOverlay={() => setVisibleCenter(false)}
          >
            <View style={styles.wrapper}>
              <View style={styles.contentContainer}>
                <Text style={styles.text}>从中心弹出的内容</Text>
              </View>
            </View>
          </Popup>
          <Button onPress={() => setVisibleCenter(true)}>中心弹出</Button>
        </Card>
      </Space>
    </ScrollView>
  );
};

export default Positions;