'use client';

import { string } from 'prop-types';
import React, { forwardRef, useState } from 'react';
import { IconWrapper } from '../../icon/icon-wrapper';
import { Typography } from '../../typography/typography';
import { SegmentedButton } from './segmented-buttons.types';
export const SegmentButton = forwardRef<
    HTMLButtonElement,
    ButtonLayoutProps & SegmentedButton
>(
    (
        {
            type,
            icon,
            grade,
            weight,
            svgSize,
            fillIcon,
            children,
            iconSize,
            opticalSize,
            toggled = false,
            iconPlace = 'left',
            centralRipple = false,
            ...props
        },
        ref,
    ) => {
        const [selectedState, setSelectedState] = useState<boolean>(false);
        const classes =
            `m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();

        return (
            <ButtonLayout
                {...props}
                centralRipple={centralRipple}
                className={classes}
                onClick={() => {
                    if (toggled) {
                        setSelectedState(state => !state);
                    }
                    props.onClick?.apply(this, props.onClick.arguments);
                }}
                ref={ref}
            >
                <IconWrapper
                    fillIcon={fillIcon}
                    grade={grade}
                    icon={icon}
                    iconPlace={iconPlace}
                    iconSize={iconSize}
                    opticalSize={opticalSize}
                    svgSize={svgSize}
                    type={type}
                    weight={weight}
                >
                    <Typography
                        className={'label-large'}
                        role={'label'}
                        size={'large'}
                    >
                        {children}
                    </Typography>
                </IconWrapper>
                <span className={'m3 m3-button-segment-state-layer'} />
            </ButtonLayout>
        );
    },
);
import { ButtonLayout } from '../button-layout/button-layout';

import { ButtonLayoutProps } from '../button-layout/button-layout.types';

SegmentButton.propTypes = {
    children: string,
};
