/**

 * 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 { TestCase, TestSuite } from '@rnoh/testerino';

import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';

import { getScrollViewContent } from './fixtures';



export function StickyHeadersTest() {

  return (

    <TestSuite

      name="sticky headers" /* (sticky headers fail on Android when Fabric is enabled) */

    >

      <TestCase

        itShould="stick item 1 and 4 (stickyHeaderIndices)"

        skip={Platform.OS === 'android'}>

        <View style={styles.wrapperView}>

          <ScrollView stickyHeaderIndices={[0, 3]} nestedScrollEnabled>

            {getScrollViewContent({})}

          </ScrollView>

        </View>

      </TestCase>

      <TestCase

        skip={Platform.OS === 'android'}

        itShould="hide sticked item 1 or 4 when scrolling down (stickyHeaderHiddenOnScroll)">

        <View style={styles.wrapperView}>

          <ScrollView

            stickyHeaderIndices={[0, 3]}

            nestedScrollEnabled

            stickyHeaderHiddenOnScroll>

            {getScrollViewContent({})}

          </ScrollView>

        </View>

      </TestCase>

      <TestCase

        skip={Platform.OS === 'android'}

        itShould="stick item 13 and 20 to the bottom (invertStickyHeaders)"

      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/309

      >

        <View style={styles.wrapperView}>

          <ScrollView

            stickyHeaderIndices={[12, 19]}

            nestedScrollEnabled

            invertStickyHeaders>

            {getScrollViewContent({})}

          </ScrollView>

        </View>

      </TestCase>

      <TestCase itShould="display Text 'custom sticky header' in the place of components 1 and 4 (shouldn't stick) (StickyHeaderComponent)">

        <View style={styles.wrapperView}>

          <ScrollView

            stickyHeaderIndices={[0, 3]}

            nestedScrollEnabled

            StickyHeaderComponent={() => <Text>custom sticky header</Text>}>

            {getScrollViewContent({})}

          </ScrollView>

        </View>

      </TestCase>

    </TestSuite>

  );

}



const styles = StyleSheet.create({

  wrapperView: {

    height: 300,

    width: '60%',

  },

  button: {

    width: 160,

    height: 36,

    backgroundColor: 'hsl(190, 50%, 70%)',

    paddingHorizontal: 16,

    paddingVertical: 8,

    borderRadius: 8,

  },

});