import React, { useCallback } from 'react';
import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
import { TextButton, Box } from '@wix/design-system';
import { Add as AddIcon } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { FiltersMap, TAG_MAX_LENGTH } from '@wix/bex-core';

export interface CreateTagButtonProps<T, F extends FiltersMap> {
  state: TagsBulkAssignPopoverState<T, F>;
  searchValue: string;
}

export const CreateTagButton = <T, F extends FiltersMap>({
  state,
  searchValue,
}: CreateTagButtonProps<T, F>) => {
  const { translate: t } = useWixPatternsContainer();
  const createAndAssignTag = useCallback(
    (tagName) => {
      state.createAndAssignTag(tagName);
    },
    [state],
  );

  return (
    <Box height="18px" width="100%">
      <TextButton
        dataHook="bulk-assign-tags-create-tag-button"
        prefixIcon={<AddIcon />}
        onClick={() => createAndAssignTag(searchValue)}
        size="small"
        ellipsis
      >
        {t('cairo.tags.collectionPage.popover.create.CTA', {
          tagName: searchValue.slice(0, TAG_MAX_LENGTH),
        })}
      </TextButton>
    </Box>
  );
};
