/**
 * Component for displaying a group of buttons in a string.
 * By default show first, by hover show all
 *
 * @author Brauer Ilya
 *
 * @date 2021-06-03
 */

import * as React from 'react';
import {Divider} from '..';
import {INTENT} from '../../constants';
import {Button} from './Button';
import {Props as ButtonProps} from './Button.types';
import * as styles from './sizedButtonGroup.m.scss';

interface IProps {
    children: Array<React.ReactElement<ButtonProps, typeof Button>>;
}

interface IState {
    isHover: boolean;
}

const BORDER_WIDTH = 2;

export class SizedButtonGroup extends React.Component<IProps, IState> {

    initWidth: number = 0;
    fullWidth: number = 0;

    containerRef = React.createRef<HTMLDivElement>();

    override state: IState = {
        isHover: true
    };

    override componentDidMount (): void {
        this.calcWidth();
    }

    override componentDidUpdate (prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void {
        if (prevProps.children.length !== this.props.children.length) {
            this.calcWidth();
        }
    }

    calcWidth () {
        if (this.containerRef.current) {
            const buttonsCount = this.containerRef.current.children.length;
            const buttonsWidths: number[] = [];

            for (let i = 0; i < buttonsCount; i++) {
                const button = this.containerRef.current.children.item(i) as HTMLButtonElement | null;

                if (button) {
                    // add +2 px for every buttons (they border), divider stay as is
                    buttonsWidths.push(i % 2 === 0 ? button.offsetWidth : button.offsetWidth);
                }
            }

            this.initWidth = buttonsWidths[0];

            this.forceUpdate();

            this.fullWidth = buttonsWidths.reduce((a, b) => a + b, 0) + BORDER_WIDTH;
        }
    }

    handleMouseEnter = () => {
        this.setState({isHover: true});
    };

    handleMouseLeave = () => {
        this.setState({isHover: false});
    };

    override render () {
        const style = {
            width: this.state.isHover === false ? this.initWidth + 'px' : this.fullWidth + 'px'
        };

        return (
            <div
                ref={this.containerRef}
                className={styles.sizedButtonGroup}
                style={style}
                onMouseEnter={this.handleMouseEnter}
                onMouseLeave={this.handleMouseLeave}
            >
                {React.Children.map(this.props.children, (child, index) => {
                    return (
                        <>
                            {index > 0 && (<Divider orientation={'vertical'} offset={0}/>)}
                            {React.cloneElement<ButtonProps>(child, {
                                isMinimal: true,
                                tooltipEnterDelay: 400,
                                intent: child.props.intent ? child.props.intent : INTENT.DEFAULT
                            })}
                        </>
                    );
                })}
            </div>
        );
    }
}