import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Box, Chip } from '@mui/material';
import { styled } from '@mui/material/styles';
import Icon from '@mui/material/Icon';
import classNames from 'classnames';
import TagChip from '../../../shared/TagChip';
import { PREFIX } from '../constants';
const classes = {
    root: `${PREFIX}-attributes-root`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'AttributesRoot'
})(() => ({}));
export default (props) => {
    var _a, _b, _c, _d;
    // PROPS
    const { className = null, value = null, onChange = null, onClick = null } = props;
    // HANDLERS
    const handleDeleteCategory = useCallback((id) => () => {
        onChange && onChange(Object.assign(Object.assign({}, value), { categories: value.categories.filter((cat) => cat.id !== id) }));
    }, [value, onChange]);
    const handleClickCategory = useCallback(() => {
        onClick && onClick('categories');
    }, [onClick]);
    const handleDeleteEvent = useCallback(() => {
        onChange && onChange(Object.assign(Object.assign({}, value), { event: null }));
    }, [value, onChange]);
    const handleClickEvent = useCallback(() => {
        onClick && onClick('event');
    }, [onClick]);
    const handleDeleteGroup = useCallback(() => {
        onChange && onChange(Object.assign(Object.assign({}, value), { group: null }));
    }, [value, onChange]);
    const handleClickGroup = useCallback(() => {
        onClick && onClick('group');
    }, [onClick]);
    const handleDeleteTag = useCallback((id) => () => {
        onChange && onChange(Object.assign(Object.assign({}, value), { addressing: value.addressing.filter((tag) => tag.id !== id) }));
    }, [value, onChange]);
    const handleClickTag = useCallback(() => {
        onClick && onClick('addressing');
    }, [onClick]);
    const handleDeleteLocation = useCallback(() => {
        onChange && onChange(Object.assign(Object.assign({}, value), { location: null }));
    }, [value, onChange]);
    const handleClickLocation = useCallback(() => {
        onClick && onClick('location');
    }, [onClick]);
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [((_a = value === null || value === void 0 ? void 0 : value.categories) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                (value === null || value === void 0 ? void 0 : value.categories.map((c) => (_jsx(Chip, { label: c.name, onDelete: handleDeleteCategory(c.id), icon: _jsx(Icon, { children: "category" }), onClick: handleClickCategory }, c.id)))), (value === null || value === void 0 ? void 0 : value.group) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.group.name, onDelete: handleDeleteGroup, icon: _jsx(Icon, { children: "groups" }), onClick: handleClickGroup, disabled: !((_b = value === null || value === void 0 ? void 0 : value.group) === null || _b === void 0 ? void 0 : _b.subscription_status) }, value === null || value === void 0 ? void 0 : value.group.id)), (value === null || value === void 0 ? void 0 : value.event) && (_jsx(Chip, { label: value === null || value === void 0 ? void 0 : value.event.name, onDelete: handleDeleteEvent, icon: _jsx(Icon, { children: "CalendarIcon" }), onClick: handleClickEvent, disabled: !((_c = value === null || value === void 0 ? void 0 : value.event) === null || _c === void 0 ? void 0 : _c.subscription_status) }, value === null || value === void 0 ? void 0 : value.event.id)), ((_d = value === null || value === void 0 ? void 0 : value.addressing) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
                (value === null || value === void 0 ? void 0 : value.addressing.map((t) => (_jsx(TagChip, { tag: t, onDelete: handleDeleteTag(t.id), icon: _jsx(Icon, { children: "label" }), onClick: handleClickTag }, t.id)))), (value === null || value === void 0 ? void 0 : value.location) && (_jsx(Chip, { icon: _jsx(Icon, { children: "add_location_alt" }), label: value === null || value === void 0 ? void 0 : value.location.location, onDelete: handleDeleteLocation, onClick: handleClickLocation }))] })));
};
