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

export function StatusBarTest() {
  return (
    <TestSuite name="Status bar">
      <StatusBarView />
    </TestSuite>
  );
}
const STYLES = ['default', 'dark-content', 'light-content'] as const;
const BACKGROUND_COLORS = ['#FF000088', '#00FF0088'];

function StatusBarView() {
  const [hidden, setHidden] = useState(false);
  const [backgroundColor, setBackgroundColor] = useState(BACKGROUND_COLORS[0]);
  const [statusBarStyle, setStatusBarStyle] = useState<StatusBarStyle>(
    STYLES[0],
  );
  const [translucent, setTranslucent] = useState(false);

  const changeStatusBarStyle = () => {
    const styleId = STYLES.indexOf(statusBarStyle) + 1;
    if (styleId === STYLES.length) {
      setStatusBarStyle(STYLES[0]);
    } else {
      setStatusBarStyle(STYLES[styleId]);
    }
  };
  const changeBackgroundColor = () => {
    setBackgroundColor(prevColor => {
      const newColorId = BACKGROUND_COLORS.indexOf(prevColor) + 1;
      return BACKGROUND_COLORS[
        newColorId === BACKGROUND_COLORS.length ? 0 : newColorId
      ];
    });
  };

  return (
    <View>
      <StatusBar
        backgroundColor={backgroundColor}
        barStyle={statusBarStyle}
        hidden={hidden}
        translucent={translucent}
      />
      <TestCase itShould="toggle status bar visibility">
        <View
          style={styles.button}
          onTouchEnd={() => {
            setHidden(!hidden);
          }}>
          <Text style={styles.buttonText}>{hidden ? 'hidden' : 'visible'}</Text>
        </View>
      </TestCase>
      <TestCase itShould="toggle status bar background color(red/green), with alpha 88">
        <View
          style={styles.button}
          onTouchEnd={() => {
            changeBackgroundColor();
          }}>
          <Text style={styles.buttonText}>{backgroundColor}</Text>
        </View>
      </TestCase>
      <TestCase itShould="toggle status bar style (light-content(default)/dark-content) ">
        <View
          style={styles.button}
          onTouchEnd={() => {
            changeStatusBarStyle();
          }}>
          <Text style={styles.buttonText}>{statusBarStyle}</Text>
        </View>
      </TestCase>
      <TestCase itShould="toggle status bar translucent">
        <View
          style={styles.button}
          onTouchEnd={() => {
            setTranslucent(!translucent);
          }}>
          <Text style={styles.buttonText}>
            {translucent ? 'translucent' : 'non-translucent'}
          </Text>
        </View>
      </TestCase>
      <TestCase itShould="set status bar color to blue (StatusBar.setBackgroundColor)">
        <View
          style={styles.button}
          onTouchEnd={() => {
            StatusBar.setBackgroundColor('#0000FF88');
          }}>
          <Text style={styles.buttonText}>Set blue</Text>
        </View>
      </TestCase>
      <TestCase itShould="set status bar dark style (light-content(default)/dark-content) (StatusBar.setBarStyle) ">
        <View
          style={styles.button}
          onTouchEnd={() => {
            StatusBar.setBarStyle('dark-content');
          }}>
          <Text style={styles.buttonText}>Set dark-content</Text>
        </View>
      </TestCase>
      <TestCase itShould="set status bar translucent (StatusBar.setTranslucent)">
        <View
          style={styles.button}
          onTouchEnd={() => {
            StatusBar.setTranslucent(true);
          }}>
          <Text style={styles.buttonText}>Set translucent</Text>
        </View>
      </TestCase>
      <TestCase
        itShould="return correct status bar height for device"
        fn={({ expect }) => {
          expect(StatusBar.currentHeight).to.be.closeTo(38.8, 0.1);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  button: {
    width: 160,
    height: 40,
    backgroundColor: 'red',
    paddingHorizontal: 16,
  },
  buttonText: {
    width: '100%',
    height: '100%',
    fontWeight: 'bold',
    color: 'white',
  },
});