import picker from "./picker";
import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, foreground, text } from "./components";

export default function contactFinder(colorScheme: ColorScheme) {
  let layer = colorScheme.middle;

  const sideMargin = 6;
  const contactButton = {
    background: background(layer, "variant"),
    color: foreground(layer, "variant"),
    iconWidth: 8,
    buttonWidth: 16,
    cornerRadius: 8,
  };

  const pickerStyle = picker(colorScheme);
  const pickerInput = {
    background: background(layer, "on"),
    cornerRadius: 6,
    text: text(layer, "mono",),
    placeholderText: text(layer, "mono", "on", "disabled", { size: "xs" }),
    selection: colorScheme.players[0],
    border: border(layer),
    padding: {
      bottom: 4,
      left: 8,
      right: 8,
      top: 4,
    },
    margin: {
      left: sideMargin,
      right: sideMargin,
    }
  };

  return {
    picker: {
      emptyContainer: {},
      item: {
        ...pickerStyle.item,
        margin: { left: sideMargin, right: sideMargin },
      },
      noMatches: pickerStyle.noMatches,
      inputEditor: pickerInput,
      emptyInputEditor: pickerInput
    },
    rowHeight: 28,
    contactAvatar: {
      cornerRadius: 10,
      width: 18,
    },
    contactUsername: {
      padding: {
        left: 8,
      },
    },
    contactButton: {
      ...contactButton,
      hover: {
        background: background(layer, "variant", "hovered"),
      },
    },
    disabledContactButton: {
      ...contactButton,
      background: background(layer, "disabled"),
      color: foreground(layer, "disabled"),
    },
  };
}