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

import { TAG_SYSTEM_CATEGORY_KEYWORDS, TAG_SYSTEM_CATEGORY_TEXT } from '@/modules/editorial/TagEditor/constants';

import { addTagsAction } from '../../redux/slices';
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 { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from '@/mui/components';

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

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

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

  const shouldDisabledAddButton = !(keywords?.length || iab?.length || labels.length);

  const handleAddTag = () => {
    dispatch(addTagsAction({ keywords, iab, labels }));
    props.onClose();
  };

  return (
    <>
      <Dialog open={props.open} onClose={props.onClose} maxWidth="lg">
        <DialogTitle onClose={props.onClose}>Add Tags</DialogTitle>
        <DialogContent>
          <Stack direction="column" spacing={3}>
            <Stack>
              <Typography variant="caption" color="text.secondary" fontWeight={400}>
                Select the tags you&apos;d like to add to the selected videos. Once selected, click &apos;Add&apos; to
                apply them
              </Typography>
            </Stack>
            <Stack className={styles.TagsRoot}>
              <Tags
                isEditable
                size="wideXl"
                video={{
                  label: labels,
                  keywords,
                  iab: formatIabToTagEditorFormat,
                }}
                onClickEdit={() => setIsOpenTagEditor(true)}
              />
            </Stack>
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button variant="text" color="primary" onClick={props.onClose}>
            Cancel
          </Button>
          <Button disabled={shouldDisabledAddButton} variant="contained" color="primary" onClick={handleAddTag}>
            Add
          </Button>
        </DialogActions>
      </Dialog>

      {isOpenTagEditor && (
        <TagEditor
          accountId={userAccountId ? parseInt(userAccountId, 10) : null}
          isOpen={isOpenTagEditor}
          isEditable
          excludeSystemTagsCategory={[TAG_SYSTEM_CATEGORY_TEXT, TAG_SYSTEM_CATEGORY_KEYWORDS]}
          shouldExcludeAllCustomTags={!hasContentOwners}
          systemTags={systemTags}
          customTags={customTags}
          onChangeSystemTag={handleOnChangeSystemTag}
          onChangeCustomTags={handleOnChangeCustomTags}
          onClose={() => setIsOpenTagEditor(false)}
        />
      )}
    </>
  );
}

BulkActionAddTags.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default BulkActionAddTags;
