import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { DeleteOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { LabelledTextInput } from '../../../components/text-input';
import { Field } from '../../../components/field';
import { useCommander } from '../../../../../hooks';
import { deleteValue } from '../../../../../commands';
import { LayerStyled, FieldWrapperStyled, RemoveButtonCSS, } from './sorting.style';
import { LAYERS_PATH } from './consts';
export const SortingLayer = ({ id, expandExtra }) => {
    const { t } = useTranslation();
    const { dispatch } = useCommander();
    const layerPath = useMemo(() => LAYERS_PATH.concat(`id:${id}`), [LAYERS_PATH]);
    const namePath = useMemo(() => layerPath.concat('name'), [layerPath]);
    const handleDeleteBind = useCallback(() => {
        dispatch(deleteValue(layerPath));
    }, [dispatch, layerPath]);
    return (_jsxs(LayerStyled, { children: [expandExtra, _jsx(FieldWrapperStyled, { children: _jsx(Field, { path: namePath, component: LabelledTextInput, label: t('globalOptions.sorting.layers.name.title') }) }), _jsx(Button, { css: RemoveButtonCSS, icon: _jsx(DeleteOutlined, {}), size: "small", onClick: handleDeleteBind })] }));
};
