/**
 * 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 {
  COMMON_PROPS,
  getScrollViewContent,
  getScrollViewContentHorizontal,
} from './fixtures';
import { ScrollView, StyleSheet, View } from 'react-native';
import React from 'react';
import { Button } from '../../components';

export function ScrollBarsTest() {
  return (
    <TestSuite name="scroll indicators / scrollbar">
      <TestCase modal itShould="have persistent scrollbar">
        <View style={styles.wrapperView}>
          <ScrollView persistentScrollbar={true} {...COMMON_PROPS} />
        </View>
      </TestCase>
      <TestCase modal itShould="shows white vertical scroll indicator">
        <View style={styles.wrapperView}>
          <ScrollView {...COMMON_PROPS} indicatorStyle={'white'} />
        </View>
      </TestCase>
      <TestCase modal itShould="show vertical scroll indicator">
        <View style={styles.wrapperView}>
          <ScrollView {...COMMON_PROPS} showsVerticalScrollIndicator={true} />
        </View>
      </TestCase>
      <TestCase modal itShould="hide vertical scroll indicator">
        <View style={styles.wrapperView}>
          <ScrollView showsVerticalScrollIndicator={false} {...COMMON_PROPS} />
        </View>
      </TestCase>
      <TestCase modal itShould="show horizontal scroll indicator">
        <View style={styles.wrapperView}>
          <ScrollView
            showsHorizontalScrollIndicator={true}
            horizontal
            {...COMMON_PROPS}>
            {getScrollViewContentHorizontal({})}
          </ScrollView>
        </View>
      </TestCase>
      <TestCase modal itShould="hide horizontal scroll indicator">
        <View style={styles.wrapperView}>
          <ScrollView
            showsHorizontalScrollIndicator={false}
            horizontal
            {...COMMON_PROPS}>
            {getScrollViewContentHorizontal({})}
          </ScrollView>
        </View>
      </TestCase>
      <TestCase modal itShould="flash scroll indicators">
        <FlashIndicatorsTest />
      </TestCase>
      <TestCase
        modal
        skip
        itShould="[FAILS on Harmony/Android] It should move the scroll bar by 50px from the right and by 200px from the top and bottom">
        <ScrollViewScrollIndicatorInsetsTest />
      </TestCase>
      <TestCase
        modal
        skip
        itShould="[FAILS on Harmony/Android] It should move the scroll bar and the scroll content by 50px from the left and by 100px from the left and right">
        <ScrollViewContentInsetsTest />
      </TestCase>
    </TestSuite>
  );
}

function FlashIndicatorsTest() {
  const scrollRef = React.useRef<ScrollView>(null);
  return (
    <View style={styles.wrapperView}>
      <Button
        label={'Flash Indicators'}
        onPress={() => {
          scrollRef.current?.flashScrollIndicators();
        }}
      />
      <ScrollView
        style={{ flex: 1 }}
        scrollEnabled={true}
        showsVerticalScrollIndicator={false}
        ref={scrollRef}>
        {getScrollViewContent({})}
      </ScrollView>
    </View>
  );
}

function ScrollViewScrollIndicatorInsetsTest() {
  return (
    <View style={styles.wrapperView}>
      <ScrollView
        style={{
          ...styles.wrapperView,
        }}
        scrollIndicatorInsets={{ right: 50, bottom: 200, top: 200 }}>
        {getScrollViewContent({})}
      </ScrollView>
    </View>
  );
}

function ScrollViewContentInsetsTest() {
  return (
    <View style={styles.wrapperView}>
      <ScrollView
        style={{
          ...styles.wrapperView,
        }}
        contentInset={{ left: 50, bottom: 100, top: 100 }}
        scrollIndicatorInsets={{ left: 50, bottom: 100, top: 100 }}>
        {getScrollViewContent({})}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapperView: {
    height: 300,
    width: '60%',
  },
});