/**
 * 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 {
  Keyboard,
  KeyboardAvoidingView,
  StyleProp,
  StyleSheet,
  TextInput,
  TouchableWithoutFeedback,
  View,
  ViewStyle,
} from 'react-native';
import { TestCase, TestSuite } from '@rnoh/testerino';
import React from 'react';
import { Modal } from '../components';

export const KeyboardAvoidingViewTest = () => {
  return (
    <TestSuite name="KeyboardAvoidingView">
      <TestCase itShould="don't avoid keyboard">
        <KeyboardAvoidingViewTestCase
          behavior="height"
          justifyContent="space-around"
          enabled={false}
        />
      </TestCase>
      <TestCase itShould="avoid keyboard by changing height">
        <KeyboardAvoidingViewTestCase
          behavior="height"
          justifyContent="space-around"
        />
      </TestCase>
      <TestCase itShould="avoid keyboard by changing position. The firebrick border should move, the green one shouldn't">
        <KeyboardAvoidingViewTestCase
          behavior="position"
          justifyContent="flex-end"
          contentContainerStyle={{ borderWidth: 4, borderColor: 'firebrick' }}
          style={{ borderWidth: 4, borderColor: 'green' }}
        />
      </TestCase>
      <TestCase itShould="avoid keyboard by changing padding">
        <KeyboardAvoidingViewTestCase
          behavior="padding"
          justifyContent="flex-end"
        />
      </TestCase>
    </TestSuite>
  );
};

type KeyboardAvoidingViewTestCaseProps = {
  behavior?: 'height' | 'position' | 'padding' | undefined;
  justifyContent?:
  | 'flex-start'
  | 'flex-end'
  | 'center'
  | 'space-between'
  | 'space-around'
  | 'space-evenly'
  | undefined;
  contentContainerStyle?: StyleProp<ViewStyle> | undefined;
  enabled?: boolean | undefined;
  style?: StyleProp<ViewStyle> | undefined;
};
function KeyboardAvoidingViewTestCase(
  props: KeyboardAvoidingViewTestCaseProps,
) {
  return (
    <>
      <Modal contentContainerStyle={{ height: '100%' }}>
        <KeyboardAvoidingView
          behavior={props.behavior}
          keyboardVerticalOffset={75} //magic value, corresponding to the height of the wrapper etc.
          enabled={props.enabled}
          contentContainerStyle={props.contentContainerStyle}
          style={[styles.container, props.style]}>
          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <View
              style={{ height: '100%', justifyContent: props.justifyContent }}>
              <TextInput placeholder="TextInput" style={styles.textInput} />
              <View
                style={{ height: 150, width: 150, backgroundColor: 'firebrick' }}
              />
              <View
                style={{ height: 150, width: 150, backgroundColor: 'beige' }}
              />
            </View>
          </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
      </Modal>
    </>
  );
}
const styles = StyleSheet.create({
  container: {
    height: '100%',
  },
  textInput: {
    height: 40,
    borderColor: '#000000',
    borderWidth: 1,
    marginBottom: 36,
  },
});