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

import * as React from "react";
import {storiesOf} from "@storybook/react";
import {withKnobs, boolean, select} from "@storybook/addon-knobs";
import sections from "../sections";
import Group from "../../Group";
import Text from "../../Text";
import Button from "../../button/Button";
import GeneralPopover from "../../popover/GeneralPopover";
import DateTimeInput from "../../date/DateTimeInput";
import PopupWithClickAway from "../../popup/PopupWithClickAway";

// $FlowFixMe[invalid-export]
const stories = storiesOf(`${sections.dataEntry}/Date Time Input`, module);
stories.addDecorator(withKnobs);
stories.add("DateTimeInput", () => (
  <DateTimeInputHoist
    disabled={boolean("disabled", false)}
    size={select("size", ["s", "m", "l"], "m")}
    isInvalid={boolean("isInvalid", false)}
  />
));

function DateTimeInputHoist(props: {|
  +disabled: boolean,
  +isInvalid: boolean,
  +size: "s" | "m" | "l",
|}) {
  const [dateTime, setDateTime] = React.useState({
    calendarDate: null,
    wallTime: null,
  });

  return (
    <Group flexDirection="column">
      <DateTimeInput
        value={dateTime}
        onChange={setDateTime}
        timeZone="UTC"
        {...props}
      />

      <Text>
        Date Time Input should close on click away in the context of a Popover
      </Text>
      <PopupWithClickAway>
        {(Target, Popup, {togglePopup}) => (
          <>
            <Target>
              <Button onClick={() => togglePopup()}>Open Popup</Button>
            </Target>
            <Popup placement="bottom-start">
              <GeneralPopover
                title="Date Time Input"
                subtitle="Clicking away into the body should close dropdowns"
                buttons={[]}
              >
                <DateTimeInput
                  value={dateTime}
                  onChange={setDateTime}
                  timeZone="UTC"
                  {...props}
                />
              </GeneralPopover>
            </Popup>
          </>
        )}
      </PopupWithClickAway>
    </Group>
  );
}