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

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import {withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import SelectInputExperimental from "../../select/SelectInput_experimental";
import DropdownListExperimental from "../../select/DropdownList_experimental";
import Label from "../../Label";
import CustomModal, {defaultModalStyles} from "../../modal/CustomModal";
import {include, padding} from "../../styles";
import colors from "../../colors";
import Button from "../../button/Button";
import TextInput from "../../TextInput";

const styles = StyleSheet.create({
  container: {
    display: "grid",
    gridGap: "20px",
    width: "200px",
  },
  modal: {
    ...include(padding.a.m),
    backgroundColor: "white",
    display: "flex",
    width: "200px",
  },
});

function ModalExample() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <Button
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Open Modal
      </Button>
      <CustomModal
        isOpen={isOpen}
        closeOptions={{
          onRequestClose: () => {
            setIsOpen(false);
          },
          shouldCloseOnEsc: true,
          shouldCloseOnOverlayClick: true,
        }}
        className={css(defaultModalStyles.content, styles.modal)}
      >
        <DropdownListShim parent={<Button>I'm in a modal</Button>}>
          <SelectInputExperimental.Option value="apple" />
          <SelectInputExperimental.Option value="banana" />
          <SelectInputExperimental.Option value="pineapple" />
        </DropdownListShim>
      </CustomModal>
    </div>
  );
}

function DropdownListShim(
  props: $Diff<
    React.ElementConfig<typeof DropdownListExperimental>,
    {|onSelection: string => void, selected?: ?string|}
  >
) {
  const [selected, setSelected] = React.useState();

  return (
    <DropdownListExperimental
      onSelection={setSelected}
      selected={selected}
      {...props}
    />
  );
}

function DropdownListTextInputShim(
  props: $Diff<
    React.ElementConfig<typeof DropdownListExperimental>,
    {|onSelection: string => void, selected?: ?string, parent: React.Node|}
  >
) {
  const [selected, setSelected] = React.useState();

  return (
    <DropdownListExperimental
      onSelection={setSelected}
      selected={selected}
      parent={<TextInput onChange={setSelected} value={selected || ""} />}
      {...props}
    />
  );
}

export default {
  title: `${sections.dataEntry}/DropdownListExperimental`,
  storyName: "basic usage",
  decorators: [withKnobs],
  component: SelectInputExperimental,
};

// TODO: one of the keyboard event handlers are broke
export const BasicUsage = (): React.Element<"div"> => (
  <div className={css(styles.container)}>
    <Label value="Attached to a button">
      <DropdownListShim parent={<Button>Some button</Button>}>
        <DropdownListExperimental.Option value="apple" />
        <DropdownListExperimental.Option value="banana" />
        <DropdownListExperimental.Option value="pineapple" />
      </DropdownListShim>
    </Label>
    <Label value="Attached to a text input">
      <DropdownListTextInputShim>
        <DropdownListExperimental.Option value="apple" />
        <DropdownListExperimental.Option value="banana" />
        <DropdownListExperimental.Option value="pineapple" />
      </DropdownListTextInputShim>
    </Label>
    <Label value="Customized options">
      <DropdownListShim parent={<Button>Customized items</Button>}>
        <DropdownListExperimental.Option value="apple">
          <div
            style={{
              padding: 8,
            }}
          >
            <div
              style={{
                background: "red",
                padding: 4,
                borderRadius: 4,
              }}
            >
              🍎 apple
            </div>
          </div>
        </DropdownListExperimental.Option>
        <DropdownListExperimental.Option value="banana">
          <div
            style={{
              padding: 8,
            }}
          >
            <div
              style={{
                background: "yellow",
                padding: 4,
                borderRadius: 4,
              }}
            >
              🍌 banana
            </div>
          </div>
        </DropdownListExperimental.Option>
        <DropdownListExperimental.Option value="pineapple">
          <div
            style={{
              padding: 8,
            }}
          >
            <div
              style={{
                background: "orange",
                padding: 4,
                borderRadius: 4,
              }}
            >
              🍍 pineapple
            </div>
          </div>
        </DropdownListExperimental.Option>
      </DropdownListShim>
    </Label>
    <Label value="Scrollable">
      <DropdownListShim parent={<Button>Scrollable</Button>}>
        <div
          style={{
            padding: 8,
            display: "flex",
            width: "100%",
            minWidth: 320,
            justifyContent: "space-between",
            alignItems: "center",
            zIndex: 1,
            position: "relative",
          }}
        >
          I am a custom header <Button>Does Nothing</Button>
        </div>
        {Array.from("abcdefghijklmnopqrstuvwxyz").map(letter => (
          <SelectInputExperimental.Option key={letter} value={letter} />
        ))}
        <div style={{maxHeight: 200, overflow: "auto", position: "relative"}}>
          {Array.from("abcdefghijklmnopqrstuvwxyz").map(letter => (
            <SelectInputExperimental.Option key={letter} value={letter} />
          ))}
        </div>
        <div
          style={{
            padding: 8,
            display: "flex",
            width: "100%",
            minWidth: 320,
            justifyContent: "space-between",
            alignItems: "center",
            backgroundColor: colors.indigo10,
            position: "relative",
          }}
        />
      </DropdownListShim>
    </Label>
    <Label value="In modal">
      <ModalExample />
    </Label>
  </div>
);

export const AdvancedUsage = (): React.Element<"div"> => (
  <div className={css(styles.container)}>
    <Label value="With sticky header and footer">
      <DropdownListShim parent={<Button>With header and footer</Button>}>
        {Array.from("abcdefghijklmnopqrstuvwxyz").map(letter => (
          <SelectInputExperimental.Option key={letter} value={letter} />
        ))}
      </DropdownListShim>
    </Label>
    <Label value="With dividers">
      <DropdownListShim parent={<Button>With dividers</Button>}>
        <SelectInputExperimental.Option value="apple" />
        <SelectInputExperimental.Option value="banana" />
        <SelectInputExperimental.Option value="pineapple" />
        <div
          style={{
            width: "calc(100% - 12px)",
            height: 1,
            backgroundColor: colors.grey20,
            margin: 6,
          }}
        />
        <SelectInputExperimental.Option value="peach" />
        <SelectInputExperimental.Option value="watermelon" />
        <SelectInputExperimental.Option value="lychee" />
        <div
          style={{
            width: "calc(100% - 12px)",
            height: 1,
            backgroundColor: colors.grey20,
            margin: 6,
          }}
        />
        <SelectInputExperimental.Option value="lemon" />
        <SelectInputExperimental.Option value="mandarin" />
        <SelectInputExperimental.Option value="grapefruit" />
      </DropdownListShim>
    </Label>
  </div>
);