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

/**
 * 自动布局测试
 * 该文件用于测试 Modal 按钮的自动布局功能
 * 规则：计算单个按钮的宽度（文本宽度 + padding），如果超过最大可用宽度，则使用纵向(column)布局
 * 最大可用宽度：
 *   - 两个按钮时：(footerWidth - spacing) / 2
 *   - 单个按钮时：footerWidth
 * 实现：
 *   1. 使用 onTextLayout 事件的 event.nativeEvent.lines[0].width 获取文本实际渲染宽度
 *   2. 使用 onLayout 事件获取 footer 容器的实际宽度
 *   3. 比较单个按钮宽度与最大可用宽度
 */
const AutoLayoutExample = () => {
  const [visible1, setVisible1] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [visible3, setVisible3] = useState(false);
  const [visible4, setVisible4] = useState(false);
  const [visible5, setVisible5] = useState(false);
  const [visible6, setVisible6] = useState(false);

  return (
    <ScrollView>
      <Card title="自动布局测试">
        {/* 短文本 - 应该自动使用横向布局 */}
        <View style={styles.buttonContainer}>
          <Button onPress={() => setVisible1(true)}>短文本（横向）</Button>
        </View>

        <Modal.Component
          visible={visible1}
          title="自动布局 - 短文本"
          message="当每个按钮宽度都小于最大可用宽度时，应该自动使用横向布局。"
          showCancelButton
          confirmButtonText="Confirm"
          cancelButtonText="取消"
          onPressConfirm={() => setVisible1(false)}
          onPressCancel={() => setVisible1(false)}
          solidButton
          // 不指定 buttonsDirection，让其自动计算
          onClose={() => setVisible1(false)}
        />

        {/* 长文本 - 应该自动使用纵向布局 */}
        <View style={styles.buttonContainer}>
          <Button onPress={() => setVisible2(true)}>长文本（纵向）</Button>
        </View>

        <Modal.Component
          visible={visible2}
          title="自动布局 - 长文本"
          message="当任一按钮宽度超过最大可用宽度时，应该自动使用纵向布局。"
          showCancelButton
          confirmButtonText="这是一个非常长的确认按钮文本内容这是一个非常长的确认按钮文本内容"
          cancelButtonText="这是一个非常长的取消按钮文本内容"
          onPressConfirm={() => setVisible2(false)}
          onPressCancel={() => setVisible2(false)}
          solidButton
          // 不指定 buttonsDirection，让其自动计算
          onClose={() => setVisible2(false)}
        />

        {/* 中等长度文本 - 边界情况 */}
        <View style={styles.buttonContainer}>
          <Button onPress={() => setVisible3(true)}>中等长度文本</Button>
        </View>

        <Modal.Component
          visible={visible3}
          title="自动布局 - 中等长度"
          message="测试临界点附近文本长度的布局效果。"
          showCancelButton
          confirmButtonText="继续操作"
          cancelButtonText="暂不操作"
          onPressConfirm={() => setVisible3(false)}
          onPressCancel={() => setVisible3(false)}
          solidButton
          onClose={() => setVisible3(false)}
        />

        {/* 单个按钮 */}
        <View style={styles.buttonContainer}>
          <Button onPress={() => setVisible4(true)}>单个按钮</Button>
        </View>

        <Modal.Component
          visible={visible4}
          title="自动布局 - 单按钮"
          message="只有一个按钮时的布局。"
          confirmButtonText="我知道了"
          onPressConfirm={() => setVisible4(false)}
          solidButton
          onClose={() => setVisible4(false)}
        />

        {/* 极长文本 - 确保触发纵向布局 */}
        <View style={styles.buttonContainer}>
          <Button onPress={() => setVisible6(true)}>
            极长文本（必定纵向）
          </Button>
        </View>

        <Modal.Component
          visible={visible6}
          title="自动布局 - 极长文本"
          message="使用非常长的文本确保超过最大可用宽度。"
          showCancelButton
          confirmButtonText="立即确认并继续下一步操作流程"
          cancelButtonText="暂时取消当前操作返回上一页"
          onPressConfirm={() => setVisible6(false)}
          onPressCancel={() => setVisible6(false)}
          solidButton
          onClose={() => setVisible6(false)}
        />

        {/* 手动指定 buttonsDirection - 覆盖自动计算 */}
        <View style={styles.buttonContainer}>
          <Button onPress={() => setVisible5(true)}>手动指定布局</Button>
        </View>

        <Modal.Component
          visible={visible5}
          title="手动指定布局方向"
          message="即使文本很短，也可以手动指定使用纵向布局。"
          showCancelButton
          confirmButtonText="确定"
          cancelButtonText="取消"
          onPressConfirm={() => setVisible5(false)}
          onPressCancel={() => setVisible5(false)}
          solidButton
          buttonsDirection="column" // 手动指定纵向布局
          onClose={() => setVisible5(false)}
        />
      </Card>
    </ScrollView>
  );
};

export default AutoLayoutExample;