import React = require('react');
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { action, computed } 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 
}

@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);
    }
    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" onPointerDown={action(() => (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>
    }
}