import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';

import { CustomTagsPropType, SystemTagsPropType } from '../../../../constants/propTypes';

import { selectedCategorySelector } from '../../../../redux/selectors';

import WithCategory from './components/WithCategory';
import WithoutCategory from './components/WithoutCategory';

function SelectCreateTag(props) {
  const selectedCategory = useSelector(selectedCategorySelector);
  if (props.shouldExcludeAllCustomTags || selectedCategory?.group) {
    return <WithCategory {...props} />;
  }

  return <WithoutCategory {...props} />;
}

SelectCreateTag.propTypes = {
  // from props
  accountId: PropTypes.number.isRequired,
  customTags: CustomTagsPropType.isRequired,
  systemTags: SystemTagsPropType.isRequired,
  disabled: PropTypes.bool.isRequired,
  shouldExcludeAllCustomTags: PropTypes.bool,
  onCreateCustomTag: PropTypes.func.isRequired,
  onCreateSystemTag: PropTypes.func.isRequired,
  // form state
  selectedCategory: PropTypes.shape({
    id: PropTypes.string,
    value: PropTypes.string,
    group: PropTypes.string,
  }).isRequired,
};

export default SelectCreateTag;
