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

export default () => {
  const windowWidth = Dimensions.get('window').width;
  const [longSubmitLoading, setLongSubmitLoading] = React.useState(false);

  return (
    <ScrollView style={styles.container}>
      <Space direction="vertical">
        <Card title="基础用法">
          <AutoLayout
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '1取消' })}
              >
                1取消
              </Button>,
              <Button key="2" onPress={() => Toast({ message: '2确认' })}>
                2确认
              </Button>,
            ]}
          />
        </Card>
        <Card title="指定列布局（默认columnReverse为true）">
          <AutoLayout
            direction="column"
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '1取消' })}
              >
                1取消
              </Button>,
              <Button key="2" onPress={() => Toast({ message: '2确认' })}>
                2确认
              </Button>,
            ]}
          />
        </Card>
        <Card title="指定列布局(columnReverse为false)">
          <AutoLayout
            direction="column"
            columnReverse={false}
            components={[
              <View key="1" style={styles.customLeftView}>
                <Text style={styles.customLeftText}>1自定义顶部组件</Text>
              </View>,
              <View key="2" style={styles.customRightView}>
                <Text style={styles.customRightText}>2自定义底部组件</Text>
              </View>,
            ]}
          />
        </Card>
        <Card title="指定行布局">
          <AutoLayout
            direction="row"
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '1取消' })}
              >
                1取消
              </Button>,
              <Button
                key="2"
                onPress={() =>
                  Toast({
                    message: '2确认确认确认确认确认确认确认确认确认确认',
                  })
                }
              >
                2确认确认确认确认确认确认确认确认确认确认
              </Button>,
            ]}
          />
        </Card>
        <Card title="components[0] 为 null">
          <AutoLayout
            components={[
              null,
              <Button key="2" onPress={() => Toast({ message: '2确认' })}>
                2确认
              </Button>,
            ]}
          />
        </Card>
        <Card title="components[1] 为 null">
          <AutoLayout
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '1取消' })}
              >
                1取消
              </Button>,
              null,
            ]}
          />
        </Card>
        <Card title="两个组件都为空">
          <AutoLayout components={[null, null]} />
        </Card>
        <Card title="长文本自动换行">
          <AutoLayout
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() =>
                  Toast({ message: '1这是一个很长的取消按钮文本' })
                }
              >
                1这是一个很长的取消按钮文本
              </Button>,
              <Button
                key="2"
                onPress={() =>
                  Toast({
                    message:
                      '2这是一个很长长长长长长长长长长长长的确认按钮文本，可能会导致换行',
                  })
                }
              >
                2这是一个很长长长长长长长长长长长长的确认按钮文本，可能会导致换行
              </Button>,
            ]}
          />
        </Card>
        <Card title="长文案提交按钮 Loading 态">
          <AutoLayout
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '1取消' })}
              >
                1取消
              </Button>,
              <Button
                key="2"
                loading={longSubmitLoading}
                onPress={() => {
                  setLongSubmitLoading(true);
                  setTimeout(() => {
                    setLongSubmitLoading(false);
                  }, 2000);
                  Toast({ message: '提交中...' });
                }}
              >
                提交订单提交订单提交订单提交订单提交订单提交订单
              </Button>,
            ]}
          />
        </Card>
        <Card title="左侧文本 + 右侧按钮">
          <AutoLayout
            components={[
              <Text key="1" style={styles.textLabel}>
                合计：
                <Text style={styles.priceText}>¥199.00</Text>
              </Text>,
              <Button key="2" onPress={() => Toast({ message: '去支付' })}>
                去支付
              </Button>,
            ]}
          />
        </Card>
        <Card title="自定义视图 + 按钮">
          <AutoLayout
            components={[
              <View key="1" style={styles.customViewWrapper}>
                <Text style={styles.couponText}>优惠券已抵扣 ¥10</Text>
              </View>,
              <Button key="2" onPress={() => Toast({ message: '确认下单' })}>
                确认下单
              </Button>,
            ]}
          />
        </Card>
        <Card title="纯自定义视图布局">
          <AutoLayout
            components={[
              <View key="1" style={styles.customLeftView}>
                <Text style={styles.customLeftText}>自定义左侧</Text>
              </View>,
              <View key="2" style={styles.customRightView}>
                <Text style={styles.customRightText}>自定义右侧</Text>
              </View>,
            ]}
          />
        </Card>
        <Card title="垂直布局：自定义视图">
          <AutoLayout
            direction="column"
            components={[
              <View key="1" style={styles.verticalTopView}>
                <Text style={styles.customLeftText}>上方视图 (宽 100%)</Text>
              </View>,
              <View key="2" style={styles.verticalBottomView}>
                <Text style={styles.customRightText}>下方视图 (宽 100%)</Text>
              </View>,
            ]}
          />
        </Card>
        <Card title="自动换行：长文本 + 自定义视图">
          <AutoLayout
            components={[
              <Text key="1" style={styles.longText}>
                这是一段非常长的说明文本，旨在测试 AutoLayout
                在空间不足时是否会自动切换到垂直布局。长文本通常占据较多空间，当与右侧固定宽度的视图共存时，可能会触发换行。
              </Text>,
              <View key="2" style={styles.infoBox}>
                <Text style={styles.infoText}>重要提示信息</Text>
              </View>,
            ]}
          />
        </Card>
        <Card title="自定义换行阈值 (getMaxSingleWidthLimit)">
          <AutoLayout
            getMaxSingleWidthLimit={() => 100}
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '虽然文本不长' })}
              >
                虽然文本不长
              </Button>,
              <Button
                key="2"
                onPress={() => Toast({ message: '但阈值很小所以垂直' })}
              >
                但阈值很小所以垂直
              </Button>,
            ]}
          />
        </Card>
        <Card title="嵌套 AutoLayout">
          <AutoLayout
            components={[
              <View
                key="1"
                style={StyleSheet.flatten([
                  styles.nestedWrapper,
                  { width: windowWidth },
                ])}
              >
                <AutoLayout
                  components={[
                    <Text key="1-1" style={styles.nestedText}>
                      嵌套内部左侧
                    </Text>,
                    <Text key="1-2" style={styles.nestedText}>
                      嵌套内部右侧
                    </Text>,
                  ]}
                />
              </View>,
              <Button
                key="2"
                onPress={() => Toast({ message: '外部确认按钮' })}
              >
                外部确认按钮
              </Button>,
            ]}
          />
        </Card>
        <Card title="超过 2 个组件">
          <AutoLayout
            components={[
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '按钮1' })}
              >
                按钮1
              </Button>,
              <Button key="2" onPress={() => Toast({ message: '按钮2' })}>
                按钮2
              </Button>,
              <Button
                key="3"
                fill={Fill.solid}
                onPress={() => Toast({ message: '按钮3' })}
              >
                按钮3
              </Button>,
            ]}
          />
        </Card>
        <Card title="5 个元素（其中 3 个 null）自动布局">
          <AutoLayout
            components={[
              null,
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '取消' })}
              >
                取消
              </Button>,
              null,
              <Button key="2" onPress={() => Toast({ message: '确认' })}>
                确认
              </Button>,
              null,
            ]}
          />
        </Card>
        <Card title="5 个元素（其中 3 个 null）自动布局">
          <AutoLayout
            components={[
              null,
              <Button
                key="1"
                fill={Fill.weak}
                onPress={() => Toast({ message: '取消' })}
              >
                取消
              </Button>,
              null,
              <Button
                key="2"
                onPress={() =>
                  Toast({ message: '确认确认确认确认确认确认确认确认' })
                }
              >
                确认确认确认确认确认确认确认确认
              </Button>,
              null,
            ]}
          />
        </Card>
      </Space>
    </ScrollView>
  );
};