'use client';

import { bool, string } from 'prop-types';
import { RadioProps } from './radio.types';
import { RippleEffect } from '../../ripple/ripple-effect';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import { InputLayout } from '../input-layout/input-layout';

/**
 * Radio component
 ** description
 */

export const Radio = forwardRef<HTMLInputElement, RadioProps>(
    ({ centralRipple = true, ...props }, ref) => {
        const [isActive, setIsActive] = useState<boolean>(false),
            ripplesRef = useRef(null),
            events = useRippleEffect(ripplesRef, setIsActive);

        const extraClassStyles =
            `m3 m3-radio-container ${isActive === true ? 'visible' : ''}`.trimEnd();

        return (
            <div {...events} className={extraClassStyles}>
                <InputLayout {...props} ref={ref} type={'radio'} />
                <span className={'m3 m3-radio-state-layer'} />
                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
                    <circle
                        className={'m3-radio-outline'}
                        cx={'50%'}
                        cy={'50%'}
                    />
                    <circle
                        className={'m3-radio-state'}
                        cx={'50%'}
                        cy={'50%'}
                    />
                </svg>
                <RippleEffect
                    callback={setIsActive}
                    central={centralRipple}
                    className={'m3-checkbox-ripple-layer'}
                    ref={ripplesRef}
                />
            </div>
        );
    },
);

Radio.propTypes = {
    children: string,
    centralRipple: bool,
};
