import React from 'react';
import Chip from '@mui/material/Chip';
import { checkIfOptionHasValues, formatDataTypeValue, getFilterValueLabel, mapFilterValue } from '@reltio/mdm-sdk';
import { ExpandedValueTooltip } from '../../../../ExpandedValueTooltip';
import { useMdmAttributesPresentation, useMdmDateMask, useMdmDateTimeMask } from '../../../../contexts/MdmModuleContext';
import { useStyles } from './styles';
export var FilterChip = function (_a) {
    var filterOption = _a.filterOption, filterValue = _a.filterValue, onDelete = _a.onDelete, dataTypeDefinition = _a.dataTypeDefinition;
    var styles = useStyles();
    var attributesPresentation = useMdmAttributesPresentation();
    var dateMask = useMdmDateMask();
    var dateTimeMask = useMdmDateTimeMask();
    var canFilterAcceptValues = checkIfOptionHasValues(filterOption.value);
    var optionLabel = filterOption.label + (canFilterAcceptValues ? ': ' : '');
    var formatValue = formatDataTypeValue({ attributesPresentation: attributesPresentation, dataTypeDefinition: dataTypeDefinition, dateMask: dateMask, dateTimeMask: dateTimeMask });
    var convertedValue = mapFilterValue(formatValue, filterValue);
    var filterLabel = canFilterAcceptValues ? getFilterValueLabel(filterOption.value, convertedValue) : '';
    return (React.createElement(Chip, { label: React.createElement(ExpandedValueTooltip, { value: optionLabel + filterLabel },
            React.createElement("div", { className: styles['filter-chip__label'] },
                React.createElement("span", { className: styles['filter-chip__option-label'] }, optionLabel),
                filterLabel)), classes: {
            root: styles['filter-chip'],
            label: styles['filter-chip__label']
        }, onDelete: onDelete }));
};
