import PropTypes from 'prop-types';
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import { useTrackStandardEvent } from "../../../hooks/tracking/index.js";
import { useCallback } from 'react';
import ButtonSelect from './ButtonSelect';
import NativeSelect from './NativeSelect';
const inputs = {
  button: ButtonSelect,
  select: NativeSelect
};

/**
 * A simple input for selecting options from a dropdown.
 */
const DropdownSelect = function DropdownSelect(props) {
  const {
    placeholder,
    onSelect,
    options,
    inputType,
    size,
    value,
    shadow,
    tracking
  } = props;
  const autoInputType = useResponsiveValues({
    xs: 'select',
    md: 'button'
  });
  const Component = inputs[inputType] || inputs[autoInputType];
  const track = useTrackStandardEvent({
    component: 'DropdownSelect',
    event: 'SelectOption',
    context: tracking?.context
  });
  const selectWithTracking = useCallback(selectedValue => {
    onSelect(selectedValue);
    track({
      detail: selectedValue
    });
  }, [track, onSelect]);
  return <Component placeholder={placeholder} onSelect={selectWithTracking} options={options} size={size} value={value} shadow={shadow} track={track} />;
};
DropdownSelect.defaultProps = {
  options: [],
  inputType: 'auto',
  size: 'sm',
  value: undefined,
  shadow: '100',
  tracking: {}
};
DropdownSelect.propTypes = {
  /**
   * Placeholder text for the input
   */
  placeholder: PropTypes.node.isRequired,
  /**
   * A callback to call on select
   */
  onSelect: PropTypes.func.isRequired,
  /**
   * The options to choose from
   */
  options: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    label: PropTypes.node
  })),
  /**
   * Force one type of input. By default it chooses based on screen size to
   * provide the best UX.
   */
  inputType: PropTypes.oneOf(['auto', 'button', 'select']),
  /**
   * The size of the target
   */
  size: PropTypes.oneOf(['sm', 'lg']),
  /**
   * The size of shadow to use
   */
  shadow: PropTypes.oneOf(['100', '200', '300', '400']),
  /**
   * The selected value represented by the dropdown
   */
  value: PropTypes.string,
  /**
   * Tracking configuration
   */
  tracking: PropTypes.shape({
    context: PropTypes.string
  })
};
export default DropdownSelect;