/**
 * 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 React, { useState, useEffect } from 'react';
import { Text, Appearance, ColorSchemeName } from 'react-native';
import { Button } from '../components';

export function AppearanceTest() {
  const [colorScheme, setColorScheme] = useState<ColorSchemeName>(
    Appearance.getColorScheme(),
  );
  const [colorSchemeHistory, setColorSchemeHistory] = useState<
    ColorSchemeName[]
  >([Appearance.getColorScheme()]);

  useEffect(() => {
    const handleColorThemeChange = ({
      colorScheme: newColorScheme,
    }: {
      colorScheme: ColorSchemeName;
    }) => {
      setColorScheme(newColorScheme);
      setColorSchemeHistory(prev => [...prev, newColorScheme]);
    };

    Appearance.addChangeListener(handleColorThemeChange);
  }, []);

  return (
    <TestSuite name="Appearance">
      <TestCase
        itShould="return sensible value"
        fn={({ expect }) => {
          expect(Appearance.getColorScheme()).to.oneOf(['light', 'dark', null]);
        }}
      />
      <TestCase itShould="show current colorScheme">
        <Button
          label="Toggle colorScheme"
          onPress={() => {
            if (colorScheme === 'light') {
              Appearance.setColorScheme('dark');
            } else if (colorScheme === 'dark') {
              Appearance.setColorScheme(null);
            } else {
              Appearance.setColorScheme('light');
            }
          }}
        />
        <Text>{colorScheme}</Text>
        <Text>
          {colorSchemeHistory
            .map(oldColorScheme => (oldColorScheme ? oldColorScheme : 'null'))
            .join(', ')}
        </Text>
      </TestCase>
    </TestSuite>
  );
}