import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import './PropertiesSection.scss';
import { Doc } from '../../fields/Doc';
import { StrCast } from '../../fields/Types';

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

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

    @computed get backgroundColor() {
        return StrCast(Doc.UserDoc().userBackgroundColor);
    }

    @computed get variantColor() {
        return StrCast(Doc.UserDoc().userVariantColor);
    }

    @observable isDouble: boolean = false;

    render() {
        if (this.props.content === undefined || this.props.content === null) return null;
        else
            return (
                <div className="propertiesView-section" onPointerEnter={action(() => this.props.setInSection && this.props.setInSection(true))} onPointerLeave={action(() => this.props.setInSection && this.props.setInSection(false))}>
                    <div
                        className="propertiesView-sectionTitle"
                        onDoubleClick={action(e => {
                            this.isDouble = true;
                            this.props.onDoubleClick && this.props.onDoubleClick();
                            this.props.setIsOpen(true);
                            setTimeout(() => (this.isDouble = false), 300);
                        })}
                        onClick={action(e => {
                            this.props.setIsOpen(!this.props.isOpen);
                        })}
                        style={{
                            background: 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.content}</div>}
                </div>
            );
    }
}