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() {
        console.log(this.props.title, this.props.content)
        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()
                console.log("open options")
                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>
    }
}