'use client';

import { FABProps } from './fab.types';
import { Icon } from '../../components';
import React, { forwardRef } from 'react';
import { bool, oneOf, string } from 'prop-types';
import { Typography } from '../../typography/typography';
import { ButtonLayout } from '../button-layout/button-layout';

/**
 * FABs component
 ** description
 */

const sizes = {
    small: 24,
    default: 24,
    large: 36,
    extended: 24,
};

export const FAB = forwardRef<HTMLButtonElement, FABProps>(
    (
        {
            children,
            icon = 'edit',
            className = '',
            size = 'default',
            elevated = false,
            disabled = false,
            variant = 'surface',
            centralRipple = false,
            ...props
        },
        ref,
    ) => (
        <ButtonLayout
            {...props}
            centralRipple={centralRipple}
            className={`m3-fab m3-${size}-fab${!elevated ? ' without-elevation' : ''} ${variant} ${className}`}
            disabled={disabled}
            ref={ref}
        >
            <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                {icon}
            </Icon>
            <span className={'m3 m3-fab-state-layer'}></span>
            {size === 'extended' ? (
                <Typography
                    className={'label-large'}
                    role={'label'}
                    size={'large'}
                >
                    {children}
                </Typography>
            ) : (
                <></>
            )}
        </ButtonLayout>
    ),
);

FAB.propTypes = {
    icon: string,
    elevated: bool,
    size: oneOf(['small', 'default', 'large', 'extended']),
    variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
};
