// node modules
import React, {FC} from "react";

// local components
import { SelectButton } from "../select_button";

// local files
import checkWhiteIcon from '../../../assets/check_icon_white.svg'
import checkBlueIcon from '../../../assets/check_icon.svg'
import { theming } from "../../../theme";
import { useStyles } from "./styles";

export interface CheckButtonPrimaryProps {
    label: string;
    className?: string;
    selected?: boolean;
    disabled?: boolean;
    loading?: boolean;
    centered?: boolean;
    children?: any;
    iconColor?: 'white' | 'blue';
    onClick?: () => any;
}

export const CheckButtonPrimary: FC<CheckButtonPrimaryProps> = ({
    label = '',
    className = '',
    selected = false,
    centered = false,
    iconColor = 'white',
    children,
    ...otherProps
}) => {
    const { root, checkWrapper, checkIconCl, childrenStyle, centeredChildren, activeCheckWrapper } = useStyles({ theme: theming.useTheme() });
    const checkBtnClass = `${root} ${className}`

    return (
        <SelectButton centered={centered} selected={selected} label={''} className={checkBtnClass} {...otherProps}>
            <div className={`${childrenStyle} ${centered ? centeredChildren : ''}`}>{children || label}</div>
            <div className={`${checkWrapper} ${selected ? activeCheckWrapper : ''}`}>
                { selected && <img className={checkIconCl} src={iconColor === 'blue' ? checkBlueIcon : checkWhiteIcon} alt="" />}
            </div>
        </SelectButton>
    )
};