import React, { useState } from "react";
import { Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { withTheme } from "../../core/theming";
import { colors, colors as Colors, typescale } from "../../styles/tokens";
import Divider from "../Divider/Divider";
import IconButton from "../IconButton/IconButton";
import Menu from "../Menu/Menu";
import Surface from "../Surface";
const Select = _ref => {
  let {
    label,
    theme,
    onSelect,
    data,
    style
  } = _ref;
  const [visible, setVisible] = useState(false);
  const openMenu = () => setVisible(true);
  const closeMenu = () => setVisible(false);
  const [selected, setSelected] = useState(undefined);
  const [selectButtonWidth, setSelectButtonWidth] = useState(0);
  const DropdownButton = React.useRef();
  const font = theme.fonts.semiBold;
  const SelectButton = () => {
    return /*#__PURE__*/React.createElement(Surface, {
      style: [{
        width: "100%",
        borderRadius: 16,
        ...styles.outline,
        backgroundColor: theme.colors.bg.subtle
      }, visible ? {
        borderColor: theme.colors.primary.default,
        backgroundColor: theme.colors.bg.surface
      } : {}, Platform.OS === "web" && {
        elevation: 0
      }, style],
      onLayout: event => {
        setSelectButtonWidth(event.nativeEvent.layout.width);
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.button,
      onPress: () => {
        setVisible(true);
      },
      ref: DropdownButton
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: "column"
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.label, {
        ...font,
        flex: 1
      }]
    }, label), /*#__PURE__*/React.createElement(Text, {
      style: {
        flex: 1,
        color: Colors.black,
        ...font
      }
    }, (selected === null || selected === void 0 ? void 0 : selected.label) || "None")), /*#__PURE__*/React.createElement(IconButton, {
      icon: "chevron-down",
      iconColor: colors.black,
      size: 20,
      onPress: () => setVisible(true)
    })));
  };
  const renderMenuItems = React.useMemo(() => {
    return data && data.map((item, i) => {
      return /*#__PURE__*/React.createElement(View, {
        key: i,
        style: {
          width: selectButtonWidth
        }
      }, /*#__PURE__*/React.createElement(Menu.Item, {
        style: [styles.item, {
          width: "100%"
        }],
        onPress: () => {
          closeMenu();
          onSelect(item);
          setSelected(item);
        },
        title: item.label,
        titleStyle: {
          ...typescale.Caption,
          fontWeight: "700"
        }
      }), i < data.length - 1 && /*#__PURE__*/React.createElement(Divider, null));
    });
  }, [data, selectButtonWidth]);
  return /*#__PURE__*/React.createElement(Menu, {
    visible: visible,
    onDismiss: closeMenu,
    anchor: /*#__PURE__*/React.createElement(SelectButton, null)
  }, renderMenuItems);
};
const styles = StyleSheet.create({
  outline: {
    borderWidth: 2,
    borderColor: "transparent"
  },
  button: {
    flexDirection: "row",
    alignItems: "center",
    height: 80,
    // width: '100%',
    paddingHorizontal: 22,
    zIndex: 1,
    borderRadius: 16,
    position: "relative",
    justifyContent: "space-between"
  },
  divider: {
    borderBottomWidth: 1,
    borderStyle: "solid",
    borderColor: "#CCCDD3"
  },
  item: {
    paddingHorizontal: 19,
    height: 80,
    justifyContent: "center"
  },
  overlay: {
    width: "100%",
    height: "100%",
    alignItems: "center"
  },
  label: {
    // flex: 1,
    textAlign: "left",
    letterSpacing: 0.9,
    textTransform: "uppercase",
    fontSize: 10,
    top: 19
  },
  dropdown: {
    position: "absolute",
    backgroundColor: "#fff",
    width: "100%",
    // height: 256,
    paddingVertical: 16,
    borderRadius: 16,
    elevation: 24,
    shadowColor: "rgba(48, 49, 51, 0.4)"
  }
});
export default withTheme(Select);
//# sourceMappingURL=index.js.map