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

import * as React from "react";
import {StyleSheet, css} from "aphrodite";
import Icon from "../Icon";
import colors from "../colors";

function RawDragHandle(): React.Element<"span"> {
  return (
    <span className={css(styles.handle)}>
      <Icon iconName="pause" size="s" color="grey40" />
    </span>
  );
}

type RawSortableElementProps<T> = {|
  +passthroughIndex: number,
  +tile: T,
  +renderTile: (value: T, index: number) => React.MixedElement,
  +dragHandle: React.MixedElement,
|};

function RawSortableElement<T>({
  passthroughIndex,
  tile,
  renderTile,
  dragHandle,
}: RawSortableElementProps<T>): React.Element<"li"> {
  return (
    <li className={css(styles.listItem)}>
      {dragHandle}
      <div className={css(styles.listItemContent)}>
        {renderTile(tile, passthroughIndex)}
      </div>
    </li>
  );
}

type RawSortableContainerProps = {|
  +children: React.Node,
|};

function RawSortableContainer({
  children,
}: RawSortableContainerProps): React.Element<"ul"> {
  return <ul className={css(styles.list)}>{children}</ul>;
}

const styleConstants = {
  listItemHeight: 38,
  containerPadding: 8,
};

const styles = StyleSheet.create({
  list: {
    listStyle: "none",
    padding: 0,
    margin: 0,
    height: "100%",
    overflow: "auto",
  },
  listItem: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    minHeight: styleConstants.listItemHeight,
    background: colors.white,
    listStyle: "none",
    transition: "150ms background-color ease-in-out",

    ":hover": {
      background: colors.grey10,
    },
  },
  listItemContent: {
    width: `calc(100% - ${styleConstants.listItemHeight}px)`,
    paddingRight: styleConstants.containerPadding,
  },
  handle: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: styleConstants.listItemHeight,
    width: styleConstants.listItemHeight,
    minWidth: styleConstants.listItemHeight,
    cursor: "grab",
  },
});

export {RawDragHandle, RawSortableElement, RawSortableContainer};