/**
 * Copyright (c) 2026 Huawei Technologies Co., Ltd.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React from 'react';
import {View, Text, ScrollView, StyleSheet} from 'react-native';

export default function BoxShadowTest() {
  return (
    <ScrollView style={styles.page}>
      <Text style={styles.title}>BoxShadow 修复验证</Text>

      {/* ① 基础灰色阴影 */}
      <Text style={styles.label}>① 基础灰色阴影</Text>
      <View style={styles.box1}>
        <Text>offsetX:2 offsetY:4 blur:8 rgba(0,0,0,0.3)</Text>
      </View>

      {/* ② 纯底部阴影 */}
      <Text style={styles.label}>② 纯底部阴影</Text>
      <View style={styles.box2}>
        <Text>offsetX:0 offsetY:6 blur:12 rgba(0,0,0,0.25)</Text>
      </View>

      {/* ③ 彩色阴影 */}
      <Text style={styles.label}>③ 彩色阴影（红）</Text>
      <View style={styles.box3}>
        <Text>offsetX:0 offsetY:4 blur:8 rgba(255,0,0,0.5)</Text>
      </View>

      {/* ④ 低透明度 vs 高透明度对比 */}
      <Text style={styles.label}>④ 透明度对比（上浅下深）</Text>
      <View style={styles.box4low}>
        <Text>alpha: 0.1（浅）</Text>
      </View>
      <View style={styles.box4high}>
        <Text>alpha: 0.8（深）</Text>
      </View>

      {/* ⑤ 多阴影叠加 */}
      <Text style={styles.label}>⑤ 多阴影叠加（OH 仅首个外阴影生效）</Text>
      <View style={styles.box5}>
        <Text>boxShadow 数组含 2 个阴影</Text>
      </View>

      {/* ⑥ spreadDistance */}
      <Text style={styles.label}>⑥ spreadDistance=10（OH 不支持 spread）</Text>
      <View style={styles.box6}>
        <Text>spreadDistance 扩展阴影边界</Text>
      </View>

      {/* ⑦ inset 内阴影 */}
      <Text style={styles.label}>
        ⑦ inset 内阴影（OH 跳过 inset，回退到传统 shadow属性）
      </Text>
      <View style={styles.box7}>
        <Text>inset + 传统 shadow fallback，预期显示灰色外阴影</Text>
      </View>

      {/* ⑧ 彩色阴影透明度对比 */}
      <Text style={styles.label}>⑧ 彩色透明度对比（红 alpha 0.2 vs 0.8）</Text>
      <View style={styles.box8low}>
        <Text>rgba(255,0,0,0.2) 浅</Text>
      </View>
      <View style={styles.box8high}>
        <Text>rgba(255,0,0,0.8) 深</Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  page: {flex: 1, backgroundColor: '#f5f5f5', padding: 20},
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  label: {fontSize: 13, color: '#666', marginTop: 20, marginBottom: 8},

  box1: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: [
      {
        offsetX: 2,
        offsetY: 4,
        blurRadius: 8,
        color: 'rgba(0,0,0,0.3)',
      },
    ],
  },
  box2: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 6,
        blurRadius: 12,
        color: 'rgba(0,0,0,0.25)',
      },
    ],
  },
  box3: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 4,
        blurRadius: 8,
        color: 'rgba(255,0,0,0.5)',
      },
    ],
  },
  box4low: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12,
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 6,
        blurRadius: 12,
        color: 'rgba(0,0,0,0.1)',
      },
    ],
  },
  box4high: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 6,
        blurRadius: 12,
        color: 'rgba(0,0,0,0.8)',
      },
    ],
  },
  box5: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 4,
        blurRadius: 10,
        color: 'rgba(0,0,0,0.2)',
      },
      {
        offsetX: 6,
        offsetY: 0,
        blurRadius: 6,
        color: 'rgba(255,0,0,0.35)',
      },
    ],
  },
  box6: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 6,
        blurRadius: 12,
        spreadDistance: 10,
        color: 'rgba(0,0,0,0.28)',
      },
    ],
  },
  box7: {
    height: 60,
    backgroundColor: '#e8eef5',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {width: 0, height: 4},
    shadowOpacity: 0.3,
    shadowRadius: 6,
    boxShadow: [
      {
        inset: true,
        offsetX: 0,
        offsetY: 2,
        blurRadius: 6,
        color: 'rgba(0,40,120,0.45)',
      },
    ],
  },
  box8low: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12,
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 6,
        blurRadius: 12,
        color: 'rgba(255,0,0,0.2)',
      },
    ],
  },
  box8high: {
    height: 60,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: [
      {
        offsetX: 0,
        offsetY: 6,
        blurRadius: 12,
        color: 'rgba(255,0,0,0.8)',
      },
    ],
  },
});