/**
 * TEAM: frontend_infra
 * WATCHERS: emcelyea
 *
 * @flow
 */

import * as React from "react";
import {withKnobs, boolean} from "@storybook/addon-knobs";
import sections from "./sections";
import StackingContext from "../StackingContext";

import Group from "../Group";
import Text from "../Text";
import {Modal} from "./story_utilities/riskyPositioningWrappers";
import PopupWithClickAway from "../popup/PopupWithClickAway";
import useToaster from "../toast/useToaster";
import Button from "../button/Button";
import Toaster from "../toast/Toaster";
import Drawer from "../Drawer";
import TextInputAutocomplete from "../TextInputAutocomplete";
import GeneralPopover from "../popover/GeneralPopover";
import CustomTooltip from "../CustomTooltip";

export default {
  title: `${sections.overlayInteractions}`,
  decorators: [withKnobs],
};

export function ZIndexDisplays(): React.Node {
  const isDeprecatedZIndexEnabled: boolean = boolean(
    "IsDeprecatedZIndexEnabled",
    false
  );
  const stackingContextConfig = {
    isDeprecatedZIndexEnabled,
    generalPortalElement: document.body,
    systemPortalElement: document.body,
  };

  return (
    <StackingContext.Provider value={stackingContextConfig}>
      <Toaster>
        <Group flexDirection="column">
          <Text>
            View Interaction Between Modals, Drawers, Popups and Toasts
          </Text>
          <Modal>
            <OverlayElements />
          </Modal>
          <OverlayElements />
        </Group>
      </Toaster>
    </StackingContext.Provider>
  );
}

const Tooltip = (
  <GeneralPopover buttons={[]} title="Tooltip">
    Tooltip Popup
  </GeneralPopover>
);
function OverlayElements(): React.Element<typeof Group> {
  const {showToast} = useToaster();
  const [isOpen, setIsOpen] = React.useState(false);
  const [textInputValue, setTextInputValue] = React.useState("");

  return (
    <Group flexDirection="row">
      <PopupWithClickAway>
        {(Target, Popup, {togglePopup}) => (
          <>
            <Target>
              <Button onClick={togglePopup}>Show Popup</Button>
            </Target>
            <Popup placement="bottom">
              <div
                style={{
                  border: "1px solid black",
                  background: "white",
                  width: "1000px",
                }}
              >
                Popup
              </div>
            </Popup>
          </>
        )}
      </PopupWithClickAway>
      <Group flexDirection="column">
        <CustomTooltip
          placement="bottom"
          overlay={Tooltip}
          mouseEnterDelay={0}
          mouseExitDelay={0}
        >
          <TextInputAutocomplete
            value={textInputValue}
            placeholder="Column of dropdown inputs with tooltips"
            onChange={setTextInputValue}
            suggestions={["AA", "BA", "CA"]}
          />
        </CustomTooltip>
        <CustomTooltip
          placement="bottom"
          overlay={Tooltip}
          mouseEnterDelay={0}
          mouseExitDelay={0}
        >
          <TextInputAutocomplete
            value={textInputValue}
            placeholder="Input Dropdown with Tooltip"
            onChange={setTextInputValue}
            suggestions={["AA", "BA", "CA"]}
          />
        </CustomTooltip>
      </Group>
      <Button
        onClick={() => {
          /* Display Toasts from anywhere using 'showToast' */
          showToast({message: "Toast"});
        }}
        width="full"
      >
        Show Toast
      </Button>
      <Button onClick={() => setIsOpen(!isOpen)}>Toggle Drawer</Button>
      <Drawer
        isOpen={isOpen}
        title="Drawer"
        navOffset={0}
        onClose={() => {
          setIsOpen(false);
        }}
        width="m"
      >
        <Button
          onClick={() => {
            /* Display Toasts from anywhere using 'showToast' */
            showToast({message: "Toast"});
          }}
          width="full"
        >
          Show Toast
        </Button>
      </Drawer>
    </Group>
  );
}