/**

 * 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 React from 'react';

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

import { TestCase, TestSuite } from '@rnoh/testerino';



export const ButtonTest = () => {

  return (

    <TestSuite name="Button">

      <TestCase itShould="render a button with a title ">

        <ButtonView />

      </TestCase>

      <TestCase itShould="render a button that should be disabled">

        <ButtonDisabled />

      </TestCase>

      <TestCase

        itShould="render a button with touchSoundDisabled"

        skip // prop doesnt exist on native side https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/476

      >

        <ButtonTouchSoundDisabled />

      </TestCase>

      <TestCase itShould="render a button with accessibility label">

        <ButtonAccessibilityLabel />

      </TestCase>

    </TestSuite>

  );

};

function ButtonView() {

  const [pressCounter, setPressCounter] = React.useState(0);

  const incrementPressCounter = () => {

    setPressCounter(count => count + 1);

  };



  return (

    <View>

      <View style={styles.buttonContainer}>

        <Button

          title="Press me!"

          color="#FF0000"

          onPress={incrementPressCounter}

        />

      </View>

      <Text style={styles.text}>Pressed {pressCounter} times</Text>

    </View>

  );

}



function ButtonTouchSoundDisabled() {

  const [pressCounter, setPressCounter] = React.useState(0);

  const [touchSoundDisabled, setTouchSoundDisabled] = React.useState(false);



  const incrementPressCounter = () => {

    setPressCounter(count => count + 1);

  };



  const toggle = () => {

    setTouchSoundDisabled(!touchSoundDisabled);

  };



  return (

    <View>

      <View style={styles.buttonsContainer}>

        <Button

          title={'Press me! ' + (touchSoundDisabled ? '(no sound)' : '')}

          color="#FF0000"

          onPress={incrementPressCounter}

          touchSoundDisabled={touchSoundDisabled}

        />

        <Button

          title={

            touchSoundDisabled ? 'Enable Touch Sound' : 'Disable Touch Sound'

          }

          color="#A4A4A4"

          onPress={toggle}

          touchSoundDisabled={false}

        />

      </View>

      <Text style={styles.text}>Pressed {pressCounter} times</Text>

    </View>

  );

}



function ButtonDisabled() {

  const [pressCounter, setPressCounter] = React.useState(0);

  const [disabled, setDisabled] = React.useState(false);



  const incrementPressCounter = () => {

    setPressCounter(count => count + 1);

  };



  const toggle = () => {

    setDisabled(!disabled);

  };



  return (

    <View>

      <View style={styles.buttonsContainer}>

        <Button

          title={disabled ? '(disabled)' : 'Press Me'}

          color="#FF0000"

          onPress={incrementPressCounter}

          disabled={disabled}

        />

        <Button

          title={disabled ? 'Enable button click' : 'Disable button click'}

          color="#A4A4A4"

          onPress={toggle}

        />

      </View>

      <Text style={styles.text}>Pressed {pressCounter} times</Text>

    </View>

  );

}



function ButtonAccessibilityLabel() {

  const [pressCounter, setPressCounter] = React.useState(0);



  const incrementPressCounter = () => {

    setPressCounter(count => count + 1);

  };



  return (

    <View>

      <View style={styles.buttonsContainer}>

        <Button

          title={'Increment the count'}

          color="#FF0000"

          onPress={incrementPressCounter}

          accessibilityLabel="Increment the count"

        />

      </View>

      <Text style={styles.text}>Pressed {pressCounter} times</Text>

    </View>

  );

}



const styles = StyleSheet.create({

  buttonContainer: {

    width: 80,

    height: 80,

  },

  buttonsContainer: {

    flexDirection: 'row',

    justifyContent: 'space-between',

    alignItems: 'center',

    marginBottom: 20,

  },

  text: {

    height: 20,

    width: 200,

    fontSize: 14,

  },

});