import React from 'react';
import PropTypes from 'prop-types';

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

import SelectCreateCategory from './components/SelectCreateCategory';
import SelectCreateTag from './components/SelectCreateTag';
import { Grid } from '@/mui/components';

import styles from './TagCreate.module.scss';

function TagCreate(props) {
  return (
    <Grid container justifyContent="space-between" alignItems="center" className={styles.Wrapper}>
      <Grid item sm={6} className={styles.AutocompleteSlot}>
        <SelectCreateCategory
          accountId={props.accountId}
          excludeSystemTagsCategory={props.excludeSystemTagsCategory}
          shouldExcludeAllCustomTags={props.shouldExcludeAllCustomTags}
          disabled={props.disabled}
        />
      </Grid>
      <Grid item sm={6} className={styles.AutocompleteSlot}>
        <SelectCreateTag
          accountId={props.accountId}
          systemTags={props.systemTags}
          customTags={props.customTags}
          disabled={props.disabled}
          shouldExcludeAllCustomTags={props.shouldExcludeAllCustomTags}
          onCreateCustomTag={props.onCreateCustomTag}
          onCreateSystemTag={props.onCreateSystemTag}
        />
      </Grid>
    </Grid>
  );
}

TagCreate.propTypes = {
  accountId: PropTypes.number.isRequired,
  customTags: CustomTagsPropType.isRequired,
  systemTags: SystemTagsPropType.isRequired,
  excludeSystemTagsCategory: PropTypes.arrayOf(PropTypes.string).isRequired,
  shouldExcludeAllCustomTags: PropTypes.bool,
  disabled: PropTypes.bool.isRequired,
  onCreateCustomTag: PropTypes.func.isRequired,
  onCreateSystemTag: PropTypes.func.isRequired,
};

export default TagCreate;
