import { Platform } from "react-native";

import theme from "mazlo-theme";

import StyleSheet from "../../services/StyleSheet";

export default StyleSheet.create({
  arrowIcon: {
    marginLeft: 8,
  },
  container: {
    position: "relative",
    zIndex: 1,
  },
  containerDisabled: {
    opacity: 0.5,
  },
  filteredContainer: {
    maxHeight: 275,
  },
  hoveredOptionContainer: {
    backgroundColor: theme.colors.grey,
  },
  noOptions: {
    color: theme.colors.inactive,
    justifyContent: "center",
    paddingHorizontal: theme.space[2],
    paddingVertical: theme.space[1],
  },
  optionContainer: {
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "flex-start",
    paddingHorizontal: theme.space[2],
    paddingVertical: theme.space[1],
  },
  optionsContainer: {
    backgroundColor: theme.colors.white,
    borderColor: theme.colors.border,
    borderWidth: 1,
    borderRadius: 2,
    flex: 1,
    position: "absolute",
    minWidth: "100%",
    ...Platform.select({
      web: {
        overflow: "auto",
      },
    }),
    top: -1,
  },
  optionsContainerRight: {
    right: 0,
  },
  optionsContainerTop: {
    bottom: 0,
    top: "auto",
  },
  optionsContainerDecorated: {
    marginTop: 8,
    marginBottom: 8,
    ...Platform.select({
      web: {
        boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
      },
    }),
  },
  optionLabel: {
    flex: 1,
  },
  optionsOrigin: {
    bottom: 0,
    position: "absolute",
    width: "100%",
  },
  optionText: {
    lineHeight: 26,
    ...Platform.select({
      web: {
        whiteSpace: "nowrap",
        textOverflow: "ellipsis",
        overflow: "hidden",
      },
    }),
  },
  search: {
    borderRadius: 0,
    borderBottomWidth: 1,
    borderWidth: 0,
  },
  selectedDisplay: {
    alignItems: "center",
    flex: 1,
    flexDirection: "row",
    height: 24,
  },
  selectedOptionContainer: {
    backgroundColor: theme.colors.grey,
  },
  selectedCount: {
    backgroundColor: theme.colors.focus,
    borderRadius: 2,
    color: theme.colors.white,
    fontSize: 13,
    marginRight: 8,
    minWidth: 20,
    padding: 2,
    textAlign: "center",
  },
  toggleContainer: {
    alignItems: "center",
    borderColor: theme.colors.border,
    borderRadius: 2,
    flexDirection: "row",
    paddingHorizontal: theme.space[2],
    paddingVertical: theme.space[1],
    overflow: "hidden",
  },
  toggleContainerDark: {
    backgroundColor: theme.colors.modes.dark.background,
    ...Platform.select({
      web: {
        borderWidth: 0,
        boxShadow: "inset 0 1px 3px 0 rgba(0, 0, 0, 0.17);",
      },
    }),
  },
  toggleContainerDecorator: {
    backgroundColor: theme.colors.focus,
    position: "absolute",
    bottom: 0,
    height: 4,
    left: 0,
    right: 0,
  },
});