import React, { forwardRef } from "react";
import { cx, safeUseId } from "../../../../utils";
import { classes } from "../../tokens";
import { dividerOrientationMap, useSegmentInner } from "../../SegmentProvider/SegmentProvider";
import { StyledDivider } from "../SegmentGroup/SegmentGroup.styles";
import { base as sizeCSS } from "./variations/_size/base";
import { base as viewCSS } from "./variations/_view/base";
import { base as disabledCSS } from "./variations/_disabled/base";
import { base as pilledCSS } from "./variations/_pilled/base";
import { StyledIcon, base } from "./SegmentIconItem.styles";
export const segmentIconItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
        const { style, size, view = 'default', className, id, icon, value, pilled, customHandleSelect, 'aria-label': ariaLabelExternal, ...rest } = props;
        const { disabledGroup, handleSelect, selectedSegmentItems, hasDivider, orientation } = useSegmentInner();
        const uniqId = safeUseId();
        const segmentId = id || `label-${uniqId}`;
        const pilledClass = pilled ? classes.segmentPilled : undefined;
        const isSelected = selectedSegmentItems?.includes(value);
        const selectedClass = isSelected ? classes.selectedSegmentItem : undefined;
        const handleSelectSegment = (event)=>{
            if (disabledGroup) {
                return;
            }
            customHandleSelect?.(event);
            handleSelect?.(value);
        };
        return /*#__PURE__*/ React.createElement(React.Fragment, null, hasDivider && /*#__PURE__*/ React.createElement(StyledDivider, {
            orientation: dividerOrientationMap[orientation]
        }), /*#__PURE__*/ React.createElement(Root, {
            view: view,
            size: size,
            id: segmentId,
            ref: outerRef,
            "aria-label": ariaLabelExternal || value,
            value: value,
            pilled: pilled,
            className: cx(classes.segmentItem, selectedClass, pilledClass, className),
            onClick: handleSelectSegment,
            tabIndex: disabledGroup ? -1 : 0,
            disabled: disabledGroup,
            style: style,
            ...rest
        }, /*#__PURE__*/ React.createElement(StyledIcon, null, icon)));
    });
export const segmentIconItemConfig = {
    name: 'SegmentIconItem',
    tag: 'button',
    layout: segmentIconItemRoot,
    base,
    variations: {
        size: {
            css: sizeCSS
        },
        view: {
            css: viewCSS
        },
        disabled: {
            css: disabledCSS,
            attrs: true
        },
        pilled: {
            css: pilledCSS,
            attrs: true
        }
    },
    defaults: {
        view: 'default',
        size: 'xs'
    }
};
