/**
 * 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 from 'react';
import { useState } from 'react';
import {
  View,
  registerViewConfig,
  ReactNativeViewAttributes,
} from 'react-native';
import { Button } from '../components';

const PropsDisplayer: typeof View = registerViewConfig('PropsDisplayer', () => {
  return {
    uiViewClassName: 'PropsDisplayer',
    bubblingEventTypes: {},
    directEventTypes: {},
    validAttributes: {
      ...ReactNativeViewAttributes.UIView,
    },
  };
});

export function RenderingTest() {
  return (
    <TestSuite name="Rendering">
      <TestCase itShould="change the rectangle's color every second">
        <Timeout
          ms={1000}
          renderItem={refreshKey => (
            <Rectangle
              backgroundColor={refreshKey % 2 === 0 ? 'red' : 'green'}
            />
          )}
        />
      </TestCase>
      <TestCase itShould="show and hide rectangle every second">
        <Timeout
          ms={1000}
          renderItem={refreshKey => (
            <View style={{ height: 64 }}>
              {refreshKey % 2 === 0 ? (
                <Rectangle backgroundColor={'red'} />
              ) : null}
            </View>
          )}
        />
      </TestCase>
      <TestCase itShould="display all props after pressing the button, not only the recently updated one">
        <Timeout
          ms={0}
          renderItem={refreshColor => {
            return (
              <PropsDisplayer
                style={{
                  backgroundColor: refreshColor % 2 ? 'red' : 'blue',
                  opacity: 0.9,
                  borderWidth: 4,
                  borderTopWidth: 4,
                  borderColor: 'orange',
                  borderTopColor: 'red',
                  borderRadius: 4,
                  borderBottomRightRadius: 8,
                  transform: [{ translateX: 1 }],
                  pointerEvents: 'auto',
                  shadowOffset: { width: 0, height: 0 },
                  shadowOpacity: 0.9,
                  shadowRadius: 9,
                  flexDirection: 'row',
                  overflow: 'hidden',
                  backfaceVisibility: 'visible',
                  width: '100%',
                  height: 2000,
                }}
              />
            );
          }}
        />
      </TestCase>
    </TestSuite>
  );
}

function Rectangle({ backgroundColor }: { backgroundColor: string }) {
  return (
    <View
      style={{
        width: 64,
        height: 64,
        backgroundColor,
      }}
    />
  );
}

function Timeout({
  renderItem,
  ms,
}: {
  renderItem: (refreshKey: number) => any;
  ms: number;
}) {
  const [refreshKey, setRefreshKey] = useState(0);

  return (
    <React.Fragment>
      <Button
        label="Run"
        onPress={() => setTimeout(() => setRefreshKey(prev => (prev += 1)), ms)}
      />
      {renderItem(refreshKey)}
    </React.Fragment>
  );
}