import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { SettingsManager } from '../util/SettingsManager';
import './PropertiesSection.scss';

export interface PropertiesSectionProps {
    title: string;
    children?: JSX.Element | string | null;
    isOpen: boolean;
    setIsOpen: (bool: boolean) => void;
    onDoubleClick?: () => void;
}

@observer
export class PropertiesSection extends React.Component<PropertiesSectionProps> {
    @computed get color() {
        return SettingsManager.userColor;
    }

    @computed get variantColor() {
        return SettingsManager.userVariantColor;
    }

    render() {
        if (this.props.children === undefined || this.props.children === null) return null;
        return (
            <div className="propertiesView-section">
                <div
                    className="propertiesView-sectionTitle"
                    onDoubleClick={action(() => {
                        this.props.onDoubleClick && this.props.onDoubleClick();
                        this.props.setIsOpen(true);
                    })}
                    onClick={action(() => {
                        this.props.setIsOpen(!this.props.isOpen);
                    })}
                    style={{
                        background: this.variantColor,
                        // this.props.isOpen ? this.variantColor : this.backgroundColor,
                        color: this.color,
                    }}>
                    {this.props.title}
                    <div className="propertiesView-sectionTitle-icon">
                        <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg" />
                    </div>
                </div>
                {!this.props.isOpen ? null : <div className="propertiesView-content">{this.props.children}</div>}
            </div>
        );
    }
}