/**
 * TEAM: frontend_infra
 * @flow
 */

import type {Element} from "react";
import {useState, type Node} from "react";
import {type DemoFile, list} from "../../demoTypes";
import DocumentUploader, {type ServerState} from "../DocumentUploader";

const demos: DemoFile = {
  demos: [
    {
      type: "full",
      example: (elementToCodeFn, demoProps) => (
        <DocumentUploaderShim
          elementToCodeFn={elementToCodeFn}
          demoProps={demoProps}
        />
      ),
      knobs: {
        serverState: list(
          [
            {label: "waiting", value: "waiting"},
            {label: "uploading", value: "uploading"},
            {label: "deleting", value: "deleting"},
            {label: "error", value: "error"},
          ],
          false,
          false,
          v => v,
          "waiting"
        ),
      },
    },
  ],
};

type Props = {|
  +elementToCodeFn: Node => void,
  +demoProps: {serverState: ServerState, ...},
|};

export function DocumentUploaderShim({
  elementToCodeFn,
  demoProps,
}: Props): Element<"div"> {
  const [document, setDocument] = useState();
  const element = (
    // $FlowFixMe[cannot-spread-inexact] upgrade 0.121.1 -> 0.122.0
    <DocumentUploader
      document={document}
      onChange={setDocument}
      fileAllowList={[".pdf"]}
      {...demoProps}
    />
  );
  if (elementToCodeFn) {
    elementToCodeFn(element);
  }
  return <div style={{height: 400}}>{element}</div>;
}
export default demos;