import React, { useCallback } from 'react';
import { EntityAttrTypes } from '@reltio/mdm-sdk';
import DeleteIcon from '@mui/icons-material/Delete';
import Typography from '@mui/material/Typography';
import i18n from 'ui-i18n';
import { SmallIconButton } from '../SmallIconButton';
import { useMdmEntityUri } from '../contexts/MdmModuleContext';
import { TagsInput } from '../TagsInput/TagsInput';
import styles from './TagsEditor.module.css';
export var TagsEditor = function (_a) {
    var className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete, state = _a.state;
    var entityUri = useMdmEntityUri();
    var edited = state === 'edited';
    var handleChange = useCallback(function (tags) {
        onChange({
            value: tags,
            attributeType: EntityAttrTypes.tags,
            uri: entityUri
        });
    }, [onChange, entityUri]);
    var handleDelete = useCallback(function () {
        onDelete({ uri: entityUri, attributeType: EntityAttrTypes.tags });
    }, [entityUri, onDelete]);
    return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
        React.createElement(TagsInput, { value: values, onChange: handleChange, className: className }),
        edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
            "(",
            i18n.text('edited'),
            ")")),
        !!onDelete && (React.createElement(SmallIconButton, { "data-reltio-id": "reltio-tags-delete-button", className: styles.deleteButton, icon: DeleteIcon, onClick: handleDelete, size: "L" }))));
};
