"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _icons = require("../../../assets/icons");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** @format */

const AttachSheet = ({
  visible,
  onClose,
  onCamera,
  onGallery,
  onDocument,
  primaryColor = '#0052CD'
}) => {
  const trigger = handler => () => {
    onClose();
    setTimeout(handler, 150);
  };
  const rows = [{
    label: 'Take photo',
    hint: 'Capture with the camera',
    Icon: _icons.CameraIcon,
    handler: onCamera
  }, {
    label: 'Photo or video',
    hint: 'Pick from your library',
    Icon: _icons.MediaIcon,
    handler: onGallery
  }, {
    label: 'Document',
    hint: 'Choose a file',
    Icon: _icons.DocumentIcon,
    handler: onDocument
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
    transparent: true,
    visible: visible,
    animationType: "slide",
    onRequestClose: onClose,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
      style: styles.backdrop,
      activeOpacity: 1,
      onPress: onClose,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
        activeOpacity: 1,
        style: styles.sheet,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: styles.grabber
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: styles.title,
          children: "Attach"
        }), rows.map(({
          label,
          hint,
          Icon,
          handler
        }, idx) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
          activeOpacity: 0.6,
          style: [styles.row, idx < rows.length - 1 && styles.rowDivider],
          onPress: trigger(handler),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
            style: [styles.iconBubble, {
              backgroundColor: primaryColor + '14'
            }],
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
              color: primaryColor,
              width: 20,
              height: 20
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: styles.rowText,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
              style: styles.rowLabel,
              children: label
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
              style: styles.rowHint,
              children: hint
            })]
          })]
        }, label)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          activeOpacity: 0.6,
          style: styles.cancelRow,
          onPress: onClose,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: styles.cancelLabel,
            children: "Cancel"
          })
        })]
      })
    })
  });
};
const styles = _reactNative.StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(15,15,20,0.45)',
    justifyContent: 'flex-end'
  },
  sheet: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingTop: 8,
    paddingBottom: _reactNative.Platform.OS === 'ios' ? 32 : 20,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -2
    },
    shadowOpacity: 0.08,
    shadowRadius: 12,
    elevation: 16
  },
  grabber: {
    alignSelf: 'center',
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#D9D9DE',
    marginBottom: 12
  },
  title: {
    fontSize: 13,
    fontWeight: '600',
    color: '#8A8A8E',
    letterSpacing: 0.4,
    textTransform: 'uppercase',
    paddingHorizontal: 20,
    paddingBottom: 8
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 14
  },
  rowDivider: {
    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
    borderBottomColor: '#EFEFF2'
  },
  iconBubble: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 14
  },
  rowText: {
    flex: 1
  },
  rowLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#1C1C1E'
  },
  rowHint: {
    fontSize: 12,
    color: '#8A8A8E',
    marginTop: 2
  },
  cancelRow: {
    marginTop: 8,
    marginHorizontal: 16,
    paddingVertical: 14,
    borderRadius: 14,
    alignItems: 'center',
    backgroundColor: '#F2F2F7'
  },
  cancelLabel: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1C1C1E'
  }
});
var _default = exports.default = AttachSheet;
//# sourceMappingURL=AttachSheet.js.map