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

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import {select, withKnobs} from "@storybook/addon-knobs";
import sections from "../sections";
import SelectInputExperimental from "../../select/SelectInput_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 Text from "../../Text";

const getSelectInputKnobs = (): {|size: any|} => ({
  size: select("size", ["s", "m", "l"], "m"),
});

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)}
      >
        <SelectInputShim>
          <SelectInputExperimental.Option value="apple" />
          <SelectInputExperimental.Option value="banana" />
          <SelectInputExperimental.Option value="pineapple" />
        </SelectInputShim>
      </CustomModal>
    </div>
  );
}

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

  return (
    <SelectInputExperimental
      onChange={setSelected}
      value={selected}
      {...getSelectInputKnobs()}
      {...props}
    />
  );
}

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

export const BasicUsage = (): React.Element<"div"> => (
  <div className={css(styles.container)}>
    <Label value="Standard">
      <SelectInputShim>
        <SelectInputExperimental.Option value="apple" />
        <SelectInputExperimental.Option value="banana" />
        <SelectInputExperimental.Option value="pineapple" />
      </SelectInputShim>
    </Label>
    <Label value="Customized options">
      <SelectInputShim>
        <SelectInputExperimental.Option value="apple">
          <div
            style={{
              padding: 8,
            }}
          >
            <div
              style={{
                background: "red",
                padding: 4,
                borderRadius: 4,
              }}
            >
              🍎 apple
            </div>
          </div>
        </SelectInputExperimental.Option>
        <SelectInputExperimental.Option value="banana">
          <div
            style={{
              padding: 8,
            }}
          >
            <div
              style={{
                background: "yellow",
                padding: 4,
                borderRadius: 4,
              }}
            >
              🍌 banana
            </div>
          </div>
        </SelectInputExperimental.Option>
        <SelectInputExperimental.Option value="pineapple">
          <div
            style={{
              padding: 8,
            }}
          >
            <div
              style={{
                background: "orange",
                padding: 4,
                borderRadius: 4,
              }}
            >
              🍍 pineapple
            </div>
          </div>
        </SelectInputExperimental.Option>
      </SelectInputShim>
    </Label>
    <Label value="Invalid">
      <SelectInputShim isInvalid={true}>
        <SelectInputExperimental.Option value="apple" />
        <SelectInputExperimental.Option value="banana" />
        <SelectInputExperimental.Option value="pineapple" />
      </SelectInputShim>
    </Label>
    <Label value="Scrollable">
      <SelectInputShim>
        {Array.from("abcdefghijklmnopqrstuvwxyz").map(letter => (
          <SelectInputExperimental.Option key={letter} value={letter} />
        ))}
      </SelectInputShim>
    </Label>
    <Label value="Scrollable">
      <SelectInputShim>
        <div>abc</div>
        <div style={{maxHeight: 200, overflow: "auto", position: "relative"}}>
          {Array.from("abcdefghijklmnopqrstuvwxyz").map(letter => (
            <SelectInputExperimental.Option key={letter} value={letter} />
          ))}
        </div>
        <div>footer</div>
      </SelectInputShim>
    </Label>
    <Label value="In modal">
      <ModalExample />
    </Label>
  </div>
);

export const AdvancedUsage = (): React.Element<"div"> => (
  <div className={css(styles.container)}>
    <Text>
      To see more stories related to SelectInput with GraphQL, see the general
      JS storybook by running `yarn storybook`
    </Text>
    <Label value="With sticky header and footer">
      <SelectInputShim>
        <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>
        <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",
          }}
        >
          <Button>Also does Nothing</Button> Sticky footer
        </div>
      </SelectInputShim>
    </Label>
    <Label value="With sticky column">
      <SelectInputShim>
        <div style={{height: 240, display: "flex"}}>
          <div
            style={{
              padding: 8,
              width: 120,
            }}
          >
            I am a sticky column <Button>Does Nothing</Button>
          </div>
          <div
            style={{
              height: "100%",
              overflow: "auto",
              position: "relative",
              flex: "1 1 auto",
            }}
          >
            {Array.from("abcdefghijklmnopqrstuvwxyz").map(letter => (
              <SelectInputExperimental.Option key={letter} value={letter} />
            ))}
          </div>
        </div>
      </SelectInputShim>
    </Label>
    <Label value="With dividers">
      <SelectInputShim>
        {[
          ["apple", "banana", "pineapple"],
          ["peach", "watermelon", "lychee"],
          ["lemon", "mandarin", "grapefruit"],
        ].map((set, index) => (
          <>
            {set.map(fruit => (
              <SelectInputExperimental.Option key={fruit} value={fruit} />
            ))}
            {index < 2 && (
              <div
                style={{
                  width: "calc(100% - 12px)",
                  height: 1,
                  backgroundColor: colors.grey20,
                  margin: 6,
                }}
              />
            )}
          </>
        ))}
      </SelectInputShim>
    </Label>
    <Label value="With sections">
      <SelectInputShim>
        {"abc,def,ghi,jklmn,opqrstuvw,xyz".split(",").map((section, index) => (
          <div
            key={section}
            style={{
              border: `1px solid ${colors.grey30}`,
              padding: 8,
              margin: 8,
            }}
          >
            <div>Section {index}</div>
            <div>
              {Array.from(section).map(letter => (
                <SelectInputExperimental.Option key={letter} value={letter} />
              ))}
            </div>
          </div>
        ))}
      </SelectInputShim>
    </Label>
    <Label value="With horizontal sections">
      <SelectInputShim>
        <div
          style={{
            maxHeight: 200,
            maxWidth: 320,
            overflow: "auto",
            position: "relative",
            padding: 8,
            display: "flex",
            flexDirection: "row",
          }}
        >
          {"abc,def,ghi,jklm,nopq,rst,uvw,xyz"
            .split(",")
            .map((section, index) => (
              <div
                key={section}
                style={{
                  border: `1px solid ${colors.grey30}`,
                  padding: 8,
                  margin: 8,
                  width: 120,
                  flex: "0 0 auto",
                }}
              >
                <div>Section {index}</div>
                <div>
                  {Array.from(section).map(letter => (
                    <SelectInputExperimental.Option
                      key={letter}
                      value={letter}
                    />
                  ))}
                </div>
              </div>
            ))}
        </div>
      </SelectInputShim>
    </Label>
    <Label value="Nonconventional options">
      <SelectInputShim>
        <div
          style={{
            maxHeight: 200,
            maxWidth: 240,
            overflow: "auto",
            position: "relative",
            padding: 8,
            display: "flex",
            flexDirection: "column",
          }}
        >
          I scroll horizontally
          {"📑💳🔭🌓👟👲🌝🌷📁🔜📍🎣,👢🌶🕢💘🐎💀🌁👞🕠🔀🍺🏥,🕔🐾🍱🎄📊💥👳👶🌓🍚"
            .split(",")
            .map(section => (
              <div
                key={section}
                style={{
                  margin: "4px 0px",
                }}
              >
                <div style={{display: "flex"}}>
                  {Array.from(section).map(emoji => (
                    <SelectInputExperimental.Option key={emoji} value={emoji}>
                      <div style={{fontSize: 24, padding: "4px 8px"}}>
                        {emoji}
                      </div>
                    </SelectInputExperimental.Option>
                  ))}
                </div>
              </div>
            ))}
        </div>
      </SelectInputShim>
    </Label>
  </div>
);