import React, {
  useState
} from 'react';

import {
  AffixComponent
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

import {
  ITestingProps
} from '../../types';

export default function Testing({
  component
}: ITestingProps<AffixComponent>): JSX.Element {
  const Affix = component;
  
  const [stateContainer, setStateContainer] = useState<HTMLElement | null>(null);
  
  return <>
    <H3>允许返回 null</H3>
    <Affix container={() => null}>
      container return null
    </Affix>
    <H3>允许返回 window</H3>
    <Affix container={() => window}>
      container return window
    </Affix>
    <H3>允许返回 DOM #1 - document.body</H3>
    <Affix container={() => document.body}>container return body</Affix>
    <H3>允许返回 DOM #2 - 使用 ref</H3>
    <div ref={setStateContainer}>
      <Affix container={() => stateContainer}>
        container return ref dom
      </Affix>
    </div>
  </>;
}