/**
 * 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 {
  processColor,
  registerViewConfig,
  ReactNativeViewAttributes,
  dispatchCommand,
  Platform,
  DeviceEventEmitter,
  findNodeHandle,
  DrawerLayoutAndroid,
  Text,
  RootTag,
  RootTagContext,
  View,
} from 'react-native';
import { TestCase, TestSuite } from '@rnoh/testerino';
import { useContext } from 'react';
import React from 'react';
import { Button } from '../components';

export const MiscPropsTest = () => {
  const rootTag: RootTag = useContext(RootTagContext);

  return (
    <TestSuite name="Misc">
      <TestCase itShould="Display the __DEV__ value">
        <Text>{`__DEV__ is ${__DEV__}`}</Text>
      </TestCase>
      <TestCase
        itShould="pass when __DEV__ is defined and have boolean type"
        fn={({ expect }) => {
          expect(typeof __DEV__).to.be.eq('boolean');
        }}
      />
      <TestCase
        skip={Platform.OS === 'android'}
        itShould="represent a color as a number"
        fn={({ expect }) => {
          expect(processColor('red')).to.be.eq(0xffff0000);
        }}
      />
      {Platform.OS === 'harmony' && (
        <TestCase
          itShould="export harmony specific utils: registerViewConfig, ReactNativeViewAttributes and dispatchCommand"
          fn={({ expect }) => {
            expect(registerViewConfig).to.be.not.undefined;
            expect(ReactNativeViewAttributes).to.be.not.undefined;
            expect(dispatchCommand).to.be.not.undefined;
          }}
        />
      )}
      <TestCase
        itShould="export DeviceEventEmitter"
        fn={({ expect }) => {
          expect(DeviceEventEmitter).to.be.not.undefined;
        }}
      />
      <TestCase
        itShould="export findNodeHandle"
        fn={({ expect }) => {
          expect(findNodeHandle).to.be.not.undefined;
        }}
      />
      <TestCase
        itShould="export DrawerLayoutAndroid"
        fn={({ expect }) => {
          expect(DrawerLayoutAndroid).to.be.not.undefined;
        }}
      />
      <TestCase
        itShould="pass when RootTagContext is defined and have sensible value"
        fn={({ expect }) => {
          expect(rootTag).to.be.greaterThan(0);
        }}
      />
      <TestCase itShould="have red background color after hiding, updating and showing again">
        <DisplayNoneUpdateTest />
      </TestCase>
    </TestSuite>
  );
};

function DisplayNoneUpdateTest() {
  const [display, setDisplay] = React.useState<'none' | undefined>(undefined);
  const [counter, setCounter] = React.useState(0);
  return (
    <View>
      <Text style={{ display, backgroundColor: 'red' }}>{counter}</Text>
      <Button
        onPress={() => setDisplay(display ? undefined : 'none')}
        label={display ? 'Show' : 'Hide'}
      />
      <Button onPress={() => setCounter(counter + 1)} label="Update" />
    </View>
  );
}