"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _theming = require("../../core/theming");
var _tokens = require("../../styles/tokens");
var _Divider = _interopRequireDefault(require("../Divider/Divider"));
var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
var _Menu = _interopRequireDefault(require("../Menu/Menu"));
var _Surface = _interopRequireDefault(require("../Surface"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const Select = _ref => {
  let {
    label,
    theme,
    onSelect,
    data,
    style
  } = _ref;
  const [visible, setVisible] = (0, _react.useState)(false);
  const openMenu = () => setVisible(true);
  const closeMenu = () => setVisible(false);
  const [selected, setSelected] = (0, _react.useState)(undefined);
  const [selectButtonWidth, setSelectButtonWidth] = (0, _react.useState)(0);
  const DropdownButton = _react.default.useRef();
  const font = theme.fonts.semiBold;
  const SelectButton = () => {
    return /*#__PURE__*/_react.default.createElement(_Surface.default, {
      style: [{
        width: "100%",
        borderRadius: 16,
        ...styles.outline,
        backgroundColor: theme.colors.bg.subtle
      }, visible ? {
        borderColor: theme.colors.primary.default,
        backgroundColor: theme.colors.bg.surface
      } : {}, _reactNative.Platform.OS === "web" && {
        elevation: 0
      }, style],
      onLayout: event => {
        setSelectButtonWidth(event.nativeEvent.layout.width);
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
      style: styles.button,
      onPress: () => {
        setVisible(true);
      },
      ref: DropdownButton
    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        flexDirection: "column"
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: [styles.label, {
        ...font,
        flex: 1
      }]
    }, label), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: {
        flex: 1,
        color: _tokens.colors.black,
        ...font
      }
    }, (selected === null || selected === void 0 ? void 0 : selected.label) || "None")), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
      icon: "chevron-down",
      iconColor: _tokens.colors.black,
      size: 20,
      onPress: () => setVisible(true)
    })));
  };
  const renderMenuItems = _react.default.useMemo(() => {
    return data && data.map((item, i) => {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        key: i,
        style: {
          width: selectButtonWidth
        }
      }, /*#__PURE__*/_react.default.createElement(_Menu.default.Item, {
        style: [styles.item, {
          width: "100%"
        }],
        onPress: () => {
          closeMenu();
          onSelect(item);
          setSelected(item);
        },
        title: item.label,
        titleStyle: {
          ..._tokens.typescale.Caption,
          fontWeight: "700"
        }
      }), i < data.length - 1 && /*#__PURE__*/_react.default.createElement(_Divider.default, null));
    });
  }, [data, selectButtonWidth]);
  return /*#__PURE__*/_react.default.createElement(_Menu.default, {
    visible: visible,
    onDismiss: closeMenu,
    anchor: /*#__PURE__*/_react.default.createElement(SelectButton, null)
  }, renderMenuItems);
};
const styles = _reactNative.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)"
  }
});
var _default = (0, _theming.withTheme)(Select);
exports.default = _default;
//# sourceMappingURL=index.js.map