import React, { useState, useEffect, useCallback } from 'react';
import { View, StyleSheet } from 'react-native';
import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
import Modal from 'react-native-modal';
import Touchable from '../../hoc/touchable/index.native';
import { ANALYTICS_EVENT_TYPE } from '../../variables/analytics';
import Space from '../space/index.native';
import Text from '../text/index.native';
import ModalSelect from '../../hoc/modal/select/index.native';
import { useTemplateContext } from '../../template/app-review/template-context';
const ICON_WIDTH = 15;
const createStyleSheet = theme => StyleSheet.create({
  container: {
    alignItems: 'center',
    flexDirection: 'row'
  },
  text: {
    flex: 1,
    color: theme.colors.gray.medium,
    textAlign: 'center'
  }
});
const logEvent = (eventName, analyticsID, analytics, questionType) => {
  analytics && analytics.logEvent(eventName, {
    id: analyticsID,
    questionType
  });
};
const Select = props => {
  const templateContext = useTemplateContext();
  const {
    brandTheme,
    theme,
    analytics
  } = templateContext;
  const [styleSheet, setStylesheet] = useState(null);
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  const {
    analyticsID,
    onBlur,
    onFocus,
    onChange,
    values,
    placeholder,
    value,
    style,
    textStyle,
    questionType,
    isFocused = false,
    isDisabled = false,
    testID = 'select'
  } = props;
  const handleFocus = useCallback(() => {
    if (!onFocus) return;
    analytics && logEvent(ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);
    onFocus();
  }, [analytics, analyticsID, onFocus, questionType]);
  const handleBlur = useCallback(() => {
    if (!onBlur) return;
    analytics && logEvent(ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);
    onBlur();
  }, [analytics, analyticsID, onBlur, questionType]);
  const handleChange = useCallback(_value => {
    onChange(_value);
    handleBlur();
  }, [onChange, handleBlur]);
  if (!styleSheet) {
    return null;
  }
  const selectedItem = values.find(item => item.selected);
  const text = selectedItem && selectedItem.text || placeholder || null;
  let textStyles = {
    ...styleSheet.text,
    ...textStyle
  };
  let color;
  if ((selectedItem?.value?.length || 0) > 0) {
    color = brandTheme?.colors?.primary;
    textStyles = {
      ...textStyles,
      color
    };
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Touchable, {
    disabled: isDisabled,
    onPress: handleFocus,
    analyticsID: analyticsID,
    testID: `${testID}-input`
  }, /*#__PURE__*/React.createElement(View, {
    style: [styleSheet.container, style]
  }, /*#__PURE__*/React.createElement(Text, {
    style: textStyles
  }, text), /*#__PURE__*/React.createElement(Space, {
    type: "tiny"
  }), /*#__PURE__*/React.createElement(ArrowDown, {
    color: color || theme.colors.gray.dark,
    height: ICON_WIDTH,
    width: ICON_WIDTH
  }))), /*#__PURE__*/React.createElement(Modal, {
    isVisible: isFocused,
    onSwipeComplete: handleBlur,
    onBackdropPress: handleBlur,
    testID: testID
  }, /*#__PURE__*/React.createElement(ModalSelect, {
    value: value,
    values: values,
    onChange: handleChange,
    onClose: handleBlur,
    testID: `${testID}-modal`
  })));
};
export default Select;
//# sourceMappingURL=index.native.js.map