import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { DeleteOutlined, CopyOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { LabelledTextInput } from '../../../components/text-input';
import { Field } from '../../../components/field';
import { LayerStyled, FieldWrapperStyled, FieldButtonCSS, } from './physics.style';
import { COLLISION_LAYERS_PATH } from './consts';
export const CollisionLayerField = ({ id, index, onDelete, }) => {
    const { t } = useTranslation();
    const layerPath = useMemo(() => COLLISION_LAYERS_PATH.concat(`id:${id}`), [COLLISION_LAYERS_PATH]);
    const namePath = useMemo(() => layerPath.concat('name'), [layerPath]);
    const handleCopyId = useCallback(() => {
        void navigator.clipboard.writeText(id);
    }, [id]);
    return (_jsxs(LayerStyled, { children: [_jsx(FieldWrapperStyled, { children: _jsx(Field, { path: namePath, component: LabelledTextInput, label: t('globalOptions.physics.collisionLayers.name.title', {
                        index,
                    }) }) }), _jsx(Button, { css: FieldButtonCSS, icon: _jsx(CopyOutlined, {}), size: "small", onClick: handleCopyId, title: t('globalOptions.physics.collisionLayers.copy.title') }), _jsx(Button, { css: FieldButtonCSS, icon: _jsx(DeleteOutlined, {}), size: "small", onClick: () => onDelete(id), title: t('globalOptions.physics.collisionLayers.delete.title') })] }));
};
