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

export function SwitchTest() {
  const [isEnabled, setIsEnabled] = useState(false);
  const [event, setEvent] = useState('');
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <TestSuite name="Switch">
      <TestCase itShould="Render a working switch and display it's state and SwitchChangeEvent details">
        <View style={styles.container}>
          <Text style={{ height: 30 }}>
            Switch isEnabled: {isEnabled.toString()}
          </Text>
          <Text style={{ height: 30 }}>OnChange event: {event}</Text>
          <Switch
            trackColor={{ false: 'green', true: 'firebrick' }}
            thumbColor={'beige'}
            onValueChange={toggleSwitch}
            value={isEnabled}
            onChange={e => setEvent(JSON.stringify(e.nativeEvent))}
          />
        </View>
      </TestCase>
      <TestCase itShould="Render a disabled switch">
        <View style={styles.container}>
          <Switch
            trackColor={{ false: 'green', true: 'firebrick' }}
            thumbColor={'beige'}
            disabled
          />
        </View>
      </TestCase>
    </TestSuite>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});