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

import { getUserAccountIdSelector, getUserContentOwnerIdsSelector } from '@/modules/@common/user/redux/selectors';

import Tags from '@/modules/editorial/common/components/NewCard/Tags/Tags';
import TagEditor from '@/modules/editorial/TagEditor';
import useTagEditorDialog, { useStoreTags } from '@/modules/editorial/TagEditor/hooks/useTagEditorDialog';
import { Stack, Typography } from '@/mui/components';

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

function TagsItem(props) {
  const { isOpenTagEditor, setIsOpenTagEditor } = useTagEditorDialog();
  const {
    labels,
    keywords,
    iab,
    formatIabToTagEditorFormat,
    systemTags,
    customTags,
    handleOnChangeCustomTags,
    handleOnChangeSystemTag,
  } = useStoreTags();

  const hasContentOwners = !!useSelector(getUserContentOwnerIdsSelector)?.length;
  const userAccountId = useSelector(getUserAccountIdSelector);

  useEffect(() => {
    props.onTagsApply({ labels, keywords, iab });
  }, [labels, keywords, iab]);

  return (
    <Stack direction="row" alignItems="center" spacing={3}>
      <Stack className={styles.LabelRoot}>
        <Typography variant="body2" color="text.primary" fontWeight={400}>
          {props.label}
        </Typography>
      </Stack>
      <Stack fullWidth gap={2}>
        <Stack fullWidth className={styles.TagsRoot}>
          <Tags
            isEditable
            size="wideXl"
            video={{
              label: labels,
              keywords,
              iab: formatIabToTagEditorFormat,
            }}
            onClickEdit={() => setIsOpenTagEditor(true)}
          />
          {props.hint && (
            <Typography variant="caption" color="text.secondary" fontWeight={400} className={styles.Hint}>
              {props.hint}
            </Typography>
          )}
        </Stack>
      </Stack>

      {isOpenTagEditor && (
        <TagEditor
          accountId={userAccountId ? parseInt(userAccountId, 10) : null}
          dialogTitle={props.tagsDialogTitle}
          shouldSelectOnlyOneTag={props.shouldSelectOnlyOneTag}
          // eslint-disable-next-line react/prop-types
          excludeSystemTagsCategory={props.excludeSystemTagsCategory}
          // eslint-disable-next-line react/prop-types
          shouldExcludeAllCustomTags={!hasContentOwners || props.shouldExcludeAllCustomTags}
          isOpen={isOpenTagEditor}
          isEditable
          systemTags={systemTags}
          customTags={customTags}
          onChangeSystemTag={handleOnChangeSystemTag}
          onChangeCustomTags={handleOnChangeCustomTags}
          onClose={() => setIsOpenTagEditor(false)}
        />
      )}
    </Stack>
  );
}

TagsItem.propTypes = {
  label: PropTypes.string.isRequired,
  tagsDialogTitle: PropTypes.string.isRequired,
  hint: PropTypes.string.isRequired,
  shouldSelectOnlyOneTag: PropTypes.bool.isRequired,
  onTagsApply: PropTypes.func.isRequired,
};

export default TagsItem;
