//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//Wijmo
import * as wjcCore from 'wijmo/wijmo';
import * as wjMultiRow from 'wijmo/wijmo.react.grid.multirow';
//Application
import { DataService } from '../services/DataSvc';

export class StylingMultiRow extends React.Component<any, any> {
    orders = DataService.default.orders;
    layoutDefs = DataService.default.ldThreeLines;

    constructor(props) {
        super(props);
        this.state = {
            layoutDefinition: this.layoutDefs
        }
    }

    render() {
        return <div>
            <h2>
                Styling Records, Groups, and Cells
        </h2>
            <p>
                In most of the applications, you would want to show where each record and group starts or ends.
            The <b>MultiRow</b> control enables this by adding CSS class names to cell elements
            in the first and last row/column of each group. The class names are
            <code>wj-record-start</code>, <code>wj-record-end</code>, <code>wj-group-start</code>,
            and <code>wj-group-end</code>.
        </p>
            <p>
                The example below shows how you can use these class names in CSS rules to customize
            the appearance of the record and group delimiters. It also shows how you can use the
            standard <b>cssClass</b> property to customize the appearance of specific cells
            within a group:
        </p>

            <div className="row">
                <div className="col-md-5">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#smrJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#smrJs" role="tab" data-toggle="tab">TS</a></li>
                        <li><a href="#smrCss" role="tab" data-toggle="tab">CSS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="smrJsx">
                            {'<wjMultiRow.MultiRow\n'}
                            {'    className="multirow-css"\n'}
                            {'    itemsSource={this.orders}\n'}
                            {'    layoutDefinition={this.state.layoutDefinition}>\n'}
                            {'</wjMultiRow.MultiRow>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="smrJs">
                            {'orders = DataService.default.orders;\n'}
                            {'layoutDefs = DataService.default.ldThreeLines;\n'}
                            {'\n'}
                            {'constructor(props) {\n'}
                            {'  super(props);\n'}
                            {'  this.state = {\n'}
                            {'  layoutDefinition: this.layoutDefs\n'}
                            {' }\n'}
                            {'}\n'}
                        </div>
                        <div className="tab-pane pane-content" id="smrCss">
                            {'/* custom styling for a MultiRow */\n'}
                            {'.multirow-css .wj-cell.wj-record-end:not(.wj-header) {\n'}
                            {'    border-bottom-color: #8fabff; /* blue lines between records */\n'}
                            {'}\n'}
                            {'.multirow-css .wj-cell.wj-group-end {\n'}
                            {'    border-right-color: #bc5505; /* brown lines between groups */\n'}
                            {'}\n'}
                            {'.multirow-css .wj-cell.id {\n'}
                            {'    color: #c0c0c0;\n'}
                            {'}\n'}
                            {'.multirow-css .wj-cell.amount {\n'}
                            {'    color: #014701;\n'}
                            {'    font-weight: bold;\n'}
                            {'}\n'}
                            {'.multirow-css .wj-cell.email {\n'}
                            {'    color: #0010c0;\n'}
                            {'    text-decoration: underline;\n'}
                            {'}\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-7">
                    <h4>Result (live):</h4>
                    <wjMultiRow.MultiRow
                        className="multirow-css"
                        itemsSource={this.orders}
                        layoutDefinition={this.state.layoutDefinition}>
                    </wjMultiRow.MultiRow>
                </div>
            </div>
        </div>;
    }
}

