import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { Component } from 'react';
import { BoolCast } from '../../../../../fields/Types';
import { Colors } from '../../../global/globalEnums';
import { IButtonProps } from '../ButtonInterface';

export class ToggleButton extends Component<IButtonProps> {
    render() {
        const type = this.props.type;
        // Determine the type of toggle button
        const switchToggle: boolean = BoolCast(this.props.rootDoc.switchToggle);

        if (switchToggle) {
            return (
                <div className={`menuButton ${type} ${'switch'}`}>
                    <label className="switch">
                        <input type="checkbox"
                            checked={this.props.backgroundColor === Colors.MEDIUM_BLUE}
                        />
                        <span className="slider round"></span>
                    </label>
                </div>
            );
        } else {
            return (
                <div className={`menuButton ${type}`}
                    style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
                    <FontAwesomeIcon className={`fontIconBox-icon-${type}`} icon={this.props.icon} color={this.props.color} />
                    {this.props.label}
                </div>
            );
        }
    }
}