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

export function AlertTest() {
  return (
    <TestSuite name="Alert">
      <TestCase
        itShould="show simple alert on click"
        initialState={false}
        arrange={({ setState, reset }) => (
          <View style={{ flexDirection: 'row' }}>
            <Button
              label="show alert"
              onPress={() => {
                Alert.alert('Test Alert', 'Message', [
                  { text: 'OK', onPress: () => setState(true) },
                ]);
              }}
            />
            <Button label="reset" onPress={reset} />
          </View>
        )}
        assert={({ state, expect }) => {
          expect(state).to.be.true;
        }}
      />
      <TestCase
        itShould="display name of the button clicked in alert"
        initialState={false}
        arrange={({ setState, reset }) => (
          <AlertView setState={setState} reset={reset} />
        )}
        assert={({ state, expect }) => {
          expect(state).to.be.true;
        }}
      />
      <TestCase
        itShould="cancel alert on press outside its window"
        initialState={false}
        arrange={({ setState, reset }) => (
          <View style={{ flexDirection: 'row' }}>
            <Button
              label="show alert"
              onPress={() => {
                Alert.alert('Test Alert', 'Press outside to dismiss', [], {
                  cancelable: true,
                  onDismiss: () => setState(true),
                });
              }}
            />
            <Button label="reset" onPress={reset} />
          </View>
        )}
        assert={({ state, expect }) => {
          expect(state).to.be.true;
        }}
      />
    </TestSuite>
  );
}

const AlertView = (props: {
  setState: React.Dispatch<React.SetStateAction<boolean>>;
  reset: () => void;
}) => {
  const [text, setText] = useState('');
  const cancelOnPress = () => {
    props.setState(true);
    setText('Cancel');
  };
  const okOnPress = () => {
    props.setState(true);
    setText('OK');
  };
  return (
    <>
      <Text>{text}</Text>
      <View style={{ flexDirection: 'row' }}>
        <Button
          label="show alert"
          onPress={() => {
            Alert.alert('Test Alert', 'Message', [
              { text: 'Cancel', onPress: cancelOnPress },
              { text: 'OK', onPress: okOnPress },
            ]);
          }}
        />
        <Button label="reset" onPress={props.reset} />
      </View>
    </>
  );
};