/**
 * Copyright (c) 2024 Huawei Technologies Co., Ltd.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE-MIT file in the root directory of this source tree.
 */

import {
  GestureResponderEvent,
  ScrollView,
  ScrollViewProps,
  StyleProp,
  Text,
  View,
  ViewStyle,
} from 'react-native';

export const COMMON_PROPS = {
  style: {
    borderWidth: 3,
    borderColor: 'firebrick',
  },
  contentContainerStyle: {
    alignItems: 'center' as 'center',
    justifyContent: 'center' as 'center',
  },
  children: getScrollViewContent({}),
};

interface ScrollViewContentProps {
  style?: StyleProp<ViewStyle>;
  amountOfChildren?: number;
  onTouchEnd?: (event: GestureResponderEvent) => void;
  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
}

// using this as a component breaks sticky headers because react native sees it then as a single component
export function getScrollViewContent({
  style,
  amountOfChildren = 20,
  onTouchEnd,
  pointerEvents,
}: ScrollViewContentProps) {
  return new Array(amountOfChildren).fill(0).map((_, idx) => {
    return (
      <View
        key={idx}
        style={[
          {
            width: '100%',
            height: 50,
            backgroundColor: idx % 2 ? 'pink' : 'beige',
            justifyContent: 'center',
          },
          style,
        ]}
        pointerEvents={pointerEvents}
        onTouchEnd={onTouchEnd}>
        <Text style={{ textAlign: 'center', height: 15 }}> {idx + 1}</Text>
      </View>
    );
  });
}

export function getScrollViewContentHorizontal({
  style,
  amountOfChildren = 20,
}: ScrollViewContentProps) {
  return new Array(amountOfChildren).fill(0).map((_, idx) => {
    return (
      <View
        key={idx}
        style={[
          {
            width: 50,
            height: '100%',
            backgroundColor: idx % 2 ? 'pink' : 'beige',
            justifyContent: 'center',
          },
          style,
        ]}>
        <Text style={{ textAlign: 'center', height: 15 }}> {idx + 1}</Text>
      </View>
    );
  });
}

export function ScrollViewComparator({
  scrollViewLength,
  commonProps,
  lhsProps,
  rhsProps,
}: {
  scrollViewLength: number;
  commonProps: ScrollViewProps;
  lhsProps: ScrollViewProps;
  rhsProps: ScrollViewProps;
}) {
  return (
    <View style={{ width: '100%' }}>
      <View
        style={{ flexDirection: 'row', width: '100%', alignItems: 'flex-end' }}>
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 12 }}>{JSON.stringify(lhsProps)}</Text>
          <View style={{ height: scrollViewLength }}>
            <ScrollView
              style={{ flex: 1, height: scrollViewLength }}
              {...{ ...commonProps, ...lhsProps }}
            />
          </View>
        </View>
        <View style={{ width: 4, height: '100%', backgroundColor: 'gray' }} />
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 12 }}>{JSON.stringify(rhsProps)}</Text>
          <View style={{ height: scrollViewLength }}>
            <ScrollView {...{ ...commonProps, ...rhsProps }} style={{ flex: 1 }} />
          </View>
        </View>
      </View>
    </View>
  );
}