import React, { FC, memo, useCallback } from 'react';
import { cn }                           from '../../util/bem';
import { IconColorType, TextColorType } from '../../util/global-props';
import { Button, ButtonPropsType }      from '../button/button.component';
import { iconMap }                      from '../icon/icon.library';

export type TabsItemPropsType = {
    tabId: string;
    className?: string;
    viewType?: ButtonPropsType['viewType'];
    align?: ButtonPropsType['align'];
    disabled?: boolean;
    icon?: keyof typeof iconMap;
    iconColor?: IconColorType;
    label?: React.ReactNode;
    onChange?: (e: React.MouseEvent, newTabId: string) => void;
    onClick?: React.EventHandler<React.MouseEvent<HTMLButtonElement, PointerEvent>>;
    selected?: boolean;
    color?: TextColorType;
};
export type Ref = HTMLButtonElement;

const className = cn('tabs-item');

export const TabsItem: FC<TabsItemPropsType> = memo<FC<TabsItemPropsType>>(React.forwardRef<Ref, TabsItemPropsType>((props, ref) => {
    const handleChange = useCallback((e: React.MouseEvent<HTMLButtonElement, PointerEvent>) => {
        if (props.onClick) {
            props.onClick(e);
        } else if (props.onChange) {
            props.onChange(e, props.tabId);
        }
    }, []);

    return (
        <Button
            className={ className({ selected: props.selected }) }
            disabled={ props.disabled }
            onClick={ handleChange }
            viewType={ props.viewType }
            align={ props.align }
            iconMargin="sm"
            ref={ ref }
            icon={ props.icon }
            iconColor={ props.iconColor }
        >
            { props.label }

        </Button>
    );
}));

TabsItem.defaultProps = { disabled: false };