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

import * as React from "react";
import {storiesOf} from "@storybook/react";
import sections from "./sections";
import Text from "../Text";
import {Modal} from "./story_utilities/riskyPositioningWrappers";
import DraggableList from "../DraggableList";
import IconButton from "../button/IconButton";
import Button from "../button/Button";
import Group from "../Group";

// $FlowFixMe[invalid-export]
const stories = storiesOf(sections.draggableList, module);

const getRandomId = () => Math.random().toString();

const initialTiles = [
  "Due Date",
  "Currency",
  "Total Invoice Amount",
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
];

const textOverflowEllipsisProps = {
  overflow: "hidden",
  textOverflow: "ellipsis",
  whiteSpace: "nowrap",
};

stories.add("Basic Usage", () => {
  const [tiles, setTiles] = React.useState(initialTiles);

  const tileRenderer = tile => <Text scale="base">{tile}</Text>;

  return (
    <div style={{width: 400}}>
      <DraggableList
        onReorder={setTiles}
        renderTile={tileRenderer}
        tiles={tiles}
      />
    </div>
  );
});

stories.add("Scroll Container", () => {
  const lotsOfTiles = Array(20)
    .fill(null)
    .map((_, index) => ({id: getRandomId(), label: `Row ${index}`}));
  const [tiles, setTiles] = React.useState(lotsOfTiles);

  const tileRenderer = tile => <Text scale="base">{tile.label}</Text>;

  return (
    <div style={{height: 600, width: 400}}>
      <DraggableList
        onReorder={setTiles}
        renderTile={tileRenderer}
        tiles={tiles}
      />
    </div>
  );
});

stories.add("Row Addition/Deletion", () => {
  const [tiles, setTiles] = React.useState(initialTiles);
  const [countCreated, setCountCreated] = React.useState(0);

  const tileRenderer = (tile, index) => (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        width: "100%",
      }}
    >
      <Text scale="base" {...textOverflowEllipsisProps}>
        {tile}
      </Text>
      <IconButton
        iconName="trash"
        onClick={() => {
          const nextTiles = [...tiles];
          nextTiles.splice(index, 1);
          setTiles(nextTiles);
        }}
        type="button"
      />
    </div>
  );

  return (
    <div style={{width: 400}}>
      <div style={{marginLeft: 40, marginBottom: 16}}>
        <Text scale="base">You can customize the tile renderer</Text>
      </div>
      <DraggableList
        onReorder={setTiles}
        renderTile={tileRenderer}
        tiles={tiles}
      />
      <div style={{marginTop: 32}}>
        <Group justifyContent="space-between">
          <Button
            intent="basic"
            onClick={() => {
              setTiles([...tiles, `Tile ${countCreated + 1}`]);
              setCountCreated(countCreated + 1);
            }}
          >
            Add Tile
          </Button>
          <Button
            intent="danger"
            onClick={() => {
              setTiles(initialTiles);
              setCountCreated(0);
            }}
          >
            Reset State
          </Button>
        </Group>
      </div>
    </div>
  );
});

stories.add("In Modal", () => {
  const [tiles, setTiles] = React.useState(initialTiles);

  const tileRenderer = tile => <Text scale="base">{tile}</Text>;

  return (
    <Modal>
      <div style={{width: 400}}>
        <DraggableList
          onReorder={setTiles}
          renderTile={tileRenderer}
          tiles={tiles}
        />
      </div>
    </Modal>
  );
});