/**
 * 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 { Text, TouchableOpacity, View, ViewProps } from 'react-native';
import { TestCase, TestSuite } from '@rnoh/testerino';
import { useState } from 'react';

export const TouchableOpacityTest = () => {
  const [pressCountOpacity, setPressCountOpacity] = useState(0);
  const [onLayoutTestText, setOnLayoutTestText] = useState('');
  return (
    <TestSuite name="TouchableOpacity">
      <TestCase itShould="make the text less visible on press">
        <TouchableOpacity onPress={() => { }}>
          <PressMe />
        </TouchableOpacity>
      </TestCase>
      <TestCase itShould="make the text slightly less visible on press (activeOpacity)">
        <TouchableOpacity activeOpacity={0.5} onPress={() => { }}>
          <PressMe />
        </TouchableOpacity>
      </TestCase>
      <TestCase itShould="show number of presses on press">
        <TouchableOpacity
          onPress={() => setPressCountOpacity(pressCountOpacity + 1)}>
          <PressMe endLabel={pressCountOpacity} />
        </TouchableOpacity>
      </TestCase>
      <TestCase itShould="render disabled">
        <TouchableOpacity disabled>
          <PressMe endLabel={'disabled'} />
        </TouchableOpacity>
      </TestCase>
      <TestCase itShould="show layout data onLayout">
        <TouchableOpacity
          onLayout={event => {
            setOnLayoutTestText(JSON.stringify(event.nativeEvent.layout));
          }}>
          <PressMe endLabel={onLayoutTestText} />
        </TouchableOpacity>
      </TestCase>
      <TestCase itShould="show square (red background, white border, rounded corners)">
        <TouchableOpacity
          style={{
            backgroundColor: 'rgb(255, 0, 0)',
            width: 100,
            height: 100,
            borderWidth: 3,
            borderColor: 'white',
            borderTopLeftRadius: 10,
            borderTopRightRadius: 20,
            borderBottomRightRadius: 30,
            borderBottomLeftRadius: 40,
          }}>
          <PressMe />
        </TouchableOpacity>
      </TestCase>
    </TestSuite>
  );
};

function PressMe(props: ViewProps & { endLabel?: string | number }) {
  return (
    <View {...props} style={{ padding: 16, borderWidth: 1 }}>
      <Text style={{ color: 'blue', height: 24, width: '100%' }}>
        Press me{props.endLabel !== undefined ? ` (${props.endLabel})` : ''}
      </Text>
    </View>
  );
}