import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { TYPE_SUBMIT } from '../../constants/buttons';
import { allowedThemes as buttonThemes, allowedActions as buttonActions, allowedSizes as buttonSizes, allowedTypes as buttonTypes } from '../button/Button';
import { LEFT, RIGHT } from '../../constants/alignment';
import Icon, { allowedTypes as iconTypes } from '../icon/Icon';
import Image from '../image/Image';
import './styles/ButtonIcon.scss';

const n = createNamespace('ButtonIcon');

const ButtonIcon = ({
    theme,
    type,
    action,
    icon,
    iconClass,
    iconPosition,
    iconSrc,
    children,
    disabled,
    selected,
    extraClass,
    size,
    url,
    onClick,
    'data-testid': dataTestId
}) => {
    const modifiers = [
        theme,
        type,
        selected && 'selected',
        size && `size-${size}`,
        iconPosition && `icon-${iconPosition}`
    ];

    const onClickHandler = e => {
        if (disabled) { return; }
        if (url && action !== TYPE_SUBMIT) { window.location.replace(url); }
        if (onClick) {
            onClick(e);
        }
    };

    const buttonTestId = dataTestId ? { [createNamespace.TESTID_ATTR]: dataTestId } : n().withTestId('button').props;
    const buttonProps = {
        ...n('button', modifiers).withTestId().withE2EId().withClass(extraClass).props,
        ...buttonTestId,
        type: action,
        disabled,
        onClick: onClickHandler
    };

    const renderIcon = () => {
        const iconModifiers = [
            iconPosition,
            size,
            icon,
            iconSrc && 'external'
        ];
        const props = { ...n('icon', iconModifiers).withTestId().withClass(iconClass).props };

        if (icon) {
            return <Icon {...props} type={icon} />;
        }

        if (iconSrc) {
            return <Image {...props} src={iconSrc} />;
        }

        return null;
    };

    return (
        /* eslint-disable react/button-has-type */
        <button
            {...buttonProps}
        >
            {renderIcon()}
            {children && (
                <span {...n('text').props}>{React.Children.map(children, child => child)}</span>
            )}
        </button>
    );
};

ButtonIcon.propTypes = {
    theme: PropTypes.oneOf(buttonThemes),
    type: PropTypes.oneOf(buttonTypes),
    action: PropTypes.oneOf(buttonActions),
    icon: PropTypes.oneOf(iconTypes),
    iconSrc: PropTypes.string,
    iconPosition: PropTypes.oneOf([LEFT.value, RIGHT.value]),
    iconClass: PropTypes.string,
    disabled: PropTypes.bool,
    selected: PropTypes.bool,
    extraClass: PropTypes.string,
    size: PropTypes.oneOf(buttonSizes),
    url: PropTypes.string,
    onClick: PropTypes.func,
    'data-testid': PropTypes.string
};

ButtonIcon.defaultProps = {
    theme: null,
    type: buttonTypes[0],
    action: buttonActions[0],
    icon: null,
    iconSrc: null,
    iconPosition: LEFT.value,
    iconClass: null,
    disabled: false,
    selected: false,
    extraClass: null,
    size: null,
    url: null,
    onClick: () => {},
    'data-testid': null
};

export default ButtonIcon;
