import React, { forwardRef } from 'react';
import {
    SegmentedButton,
    SegmentedButtonsProps,
} from './segmented-buttons.types';
import { string } from 'prop-types';
import { ButtonLayout } from '../../components';
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
import { IconWrapper } from '../../icon/icon-wrapper';

export const SegmentButton = forwardRef<
    HTMLButtonElement,
    ButtonLayoutProps & SegmentedButton
>(({ centralRipple = false, iconPlace = 'left', icon, ...props }, ref) => {
    const classes = `m3-button-segment ${props.className ?? ''}`.trimEnd();
    return (
        <ButtonLayout
            {...props}
            centralRipple={centralRipple}
            className={classes}
            ref={ref}
        >
            <IconWrapper icon={icon} iconPlace={iconPlace}>
                {props.children}
            </IconWrapper>
            <span className={'m3 m3-button-segment-state-layer'} />
        </ButtonLayout>
    );
});

SegmentButton.propTypes = {
    children: string,
};

export const SegmentedButtons = forwardRef<
    HTMLDivElement,
    SegmentedButtonsProps
>(({ children, ...props }, ref) => {
    if (children.length <= 1) {
        throw 'You must build segmented button with 2 or more buttton';
    }

    return (
        <div
            className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
            ref={ref}
        >
            {children}
        </div>
    );
});