import * as React from 'react';
import InputArea from '..';
import { inputAreaTestkitFactory } from '../../../testkit';
import { inputAreaTestkitFactory as inputAreaEnzymeTestkitFactory } from '../../../testkit/enzyme';
import { inputAreaTestkitFactory as inputAreaPuppeteerTestkitFactory } from '../../../testkit/puppeteer';
import * as enzyme from 'enzyme';
import * as puppeteer from 'puppeteer';

function inputAreaWithMandatoryProps() {
  return <InputArea />;
}

function InputAreaWithAllProps() {
  return (
    <InputArea
      dataHook="hook"
      className="cn"
      ariaControls="c"
      ariaDescribedby="c"
      ariaLabel="c"
      autoFocus
      autoGrow
      autoSelect
      rows={InputArea.MIN_ROWS}
      defaultValue="value"
      disabled
      forceFocus
      forceHover
      hasCounter
      id="id"
      maxHeight="10px"
      maxLength={10}
      menuArrow
      required
      minHeight="10px"
      minRowsAutoGrow={2}
      name="name"
      onBlur={_ev => {}}
      onChange={_ev => {}}
      onEnterPressed={_ev => {}}
      onEscapePressed={() => {}}
      onFocus={_ev => {}}
      onKeyDown={_ev => {}}
      onKeyUp={_ev => {}}
      placeholder="placeholder"
      readOnly
      resizable
      size="medium"
      tabIndex={4}
      tooltipPlacement="top"
      value="value"
      status="warning"
      statusMessage="some status message"
    />
  );
}

function testInstanceMethods() {
  const instance = new InputArea({});
  instance.blur();
  instance.focus();
  instance.select();
}

async function testkits() {
  const testkit = inputAreaTestkitFactory({
    dataHook: 'hook',
    wrapper: document.createElement('div'),
  });

  const enzymeTestkit = inputAreaEnzymeTestkitFactory({
    dataHook: 'hook',
    wrapper: enzyme.mount(<div />),
  });

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const puppeteerTestkit = await inputAreaPuppeteerTestkitFactory({
    dataHook: 'hook',
    page,
  });
}