/**
 * Created by rburson on 1/14/16.
 */
import * as React from 'react'
import {Prop, EntityRec, PaneContext, Log} from 'catavolt-sdk'
import {CvState, CvProps, CvBaseMixin, CvProp, CvImageAction} from 'catreact'
import {CvImage} from "./CvImage";

export interface CvHtmlPropProps extends CvProps {
    /**
     * className to apply to the property.  wrapperElemProps will override this value
     */
    className?:string,
    /**
     * style to apply to the property.  wrapperElemProps will override this value
     */
    style?:{}
    /**
     * Rendering override.  Simple callback function to access the sdk {Prop} object
     */
    ,
    handler?:(o:Prop) => {};
    /**
     * Function that allows for visibility control.  Accepts sinlge param of sdk {Prop} object.  Should return true
     * if the component should be rendered, false if the component should be hidden.
     */
    isVisible?:(o:Prop) => boolean;
    /**
     * The name of this property.  The given (or enclosing) sdk {EnityRec} will be searched for the sdk {Prop} of this name
     */
    propName:string;
    /**
     * Default to be used if this sdk {Prop} value is null or undefined
     */
    defaultValue?:string;
    /**
     * The sdk {EntityRec} that owns this sdk {Prop}
     */
    entityRec?:EntityRec;
    /**
     * The containing PaneContext
     */
    paneContext?:PaneContext;
    /**
     * The wrapper element name for this prop value (should be html)
     */
    wrapperElemName?:string;
    /**
     * The wrapper element props
     */
    wrapperElemProps?:any;
    /**
     * Force the value of this prop to be the given value
     */
    overrideValue?:string;
    /**
     * The className to apply to 'bool' true values
     */
    boolTrueClassName?:string;
    /**
     * The className to apply to 'bool' false values
     */
    boolFalseClassName?:string;
    /**
     * The actions available for images
     */
    imageActions?:Array<CvImageAction>;
    /**
     * The className to apply to image elements
     */
    imageClassName?:string;
    /**
     * The style to apply to image elements
     */
    imageStyle?:{},
    /**
     * Is the image control read only or maintainable.  Used to allow class name annotating.
     */
    imageReadOnly?:boolean;
    /**
     * Should the image control automatically fire the single image action.
     */
    hasFocus?:boolean;
     /**
     * Set the named properties' values to the property's final resolved value
     * i.e. 'title' on an html element for a tooltip
     */
    dataPropNames?:Array<string>;
    
}

/*
 ***************************************************
 * Render a Property
 ***************************************************
 */
export let CvHtmlProp = React.createClass<CvHtmlPropProps, CvState>({

    mixins: [CvBaseMixin],

    getDefaultProps: function () {
        return {
            propName: null,
            defaultValue: null,
            handler: null,
            isVisible: null,
            entityRec: null,
            paneContext: null,
            wrapperElemName: 'span',
            wrapperElemProps: null,
            overrideValue: null,
            boolTrueClassName:'cv-icon cv-bool-true',
            boolFalseClassName: 'cv-icon cv-bool-false',
            imageActions:null,
            imageClassName: null,
            imageStyle: null,
            imageReadOnly: null,
            style: null,
            className: null,
            renderer: null,
            dataPropNames:[]
        }
    },

    render: function () {

        /* We can't do ES7 style rest destructuring in Typescript yet... */
        const passthroughProps = {
            propName: this.props.propName,
            defaultValue: this.props.defaultValue,
            handler: this.props.handler,
            isVisible: this.props.isVisible,
            entityRec: this.props.entityRec,
            paneContext: this.props.paneContext,
            wrapperElemName: this.props.wrapperElemName,
            wrapperElemProps: this.props.wrapperElemProps,
            overrideValue: this.props.overrideValue,
            style: this.props.style,
            className: this.props.className,
            dataPropNames: this.props.dataPropNames,
            renderer: this.props.renderer
        }
        
        return <CvProp {...passthroughProps}
            booleanRenderer={(boolVal)=>{
                return boolVal ? <span className={this.props.boolTrueClassName}/> : <span className={this.props.boolFalseClassName}/>
            }}
            binaryRenderer={(binaryUrl)=>{
                const style = this.props.imageStyle ? this.props.imageStyle : this.props.style;
                return <CvImage style={style} src={binaryUrl} className={this.props.className} imageClassName={this.props.imageClassName}
                    actions={this.props.imageActions} readOnly={this.props.imageReadOnly} hasFocus={this.props.hasFocus}/>
            }
        }/>

    }

});