//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//Wijmo
import * as wjcInput from 'wijmo/wijmo.input';
import * as wjcChart from 'wijmo/wijmo.chart';
import * as wjInput from 'wijmo/wijmo.react.input';
import * as wjChartHierarchical from 'wijmo/wijmo.react.chart.hierarchical';
//Application
import { DataService } from '../services/DataSvc';

export class BasicFeatures extends React.Component<any, any> {

    data = DataService.default.getHierarchicalData();
    palettes = ['standard', 'cocoa', 'coral', 'dark', 'highcontrast', 'light', 'midnight', 'minimal', 'modern', 'organic', 'slate'];

    constructor(props) {
        super(props);

        this.state = {
            innerRadius: 0,
            offset: 0,
            startAngle: 0,
            palette: 'standard',
            chartPalette: wjcChart.Palettes['standard'],
            reversed: false
        }
    }

    paletteChanged(menu: wjcInput.Menu) {
        var selectedStacking = menu.selectedValue;
        this.setState({ palette: selectedStacking });
        this.setState({ chartPalette: wjcChart.Palettes[selectedStacking] });
    }

    startAngleChanged(sender: wjcInput.InputNumber) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ startAngle: sender.value });
    }

    innerRadiusChanged(sender: wjcInput.InputNumber) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ innerRadius: sender.value });
    }

    offsetChanged(sender: wjcInput.InputNumber) {
        if (sender.value < sender.min || sender.value > sender.max) {
            return;
        }
        this.setState({ offset: sender.value });
    }

    stateChanged(event) {
        var target = event.target,
            value = target.type === 'checkbox' ? target.checked : target.value,
            name = target.name;

        this.setState({
            [name]: value
        });
    }


    render() {
        return <div>
            <h2 id="Features">Basic Features</h2>
            <p>
                The Sunburst chart control has five basic properties that allow you to customize its layout and appearance:
        </p>
            <ul>
                <li>
                    <b>innerRadius</b>:  Specifies the control's inner radius to support donut charts.
            </li>
                <li>
                    <b>offset</b>:  Specifies the offset of the sunburst slices from the center of the control.
            </li>
                <li>
                    <b>startAngle</b>:  Starting at the nine o'clock position, specifies the angle to start drawing sunburst slices.
            </li>
                <li>
                    <b>palette</b>:  Specifies an array of default colors to be used when rendering sunburst slices.
            </li>
                <li>
                    <b>reversed</b>:  Determines whether the control should draw sunburst slices clockwise (false) or counterclockwise (true).
            </li>
            </ul>
            <p>
                The example below allows you to see what happens when you change these properties. Also, clicking on a sunburst slice will
            display a tooltip for the data point.
        </p>
            <div className="row">
                <div className="col-md-6">
                    <ul className="nav nav-tabs" role="tablist">
                        <li className="active"><a href="#bfJsx" role="tab" data-toggle="tab">JSX</a></li>
                        <li><a href="#bfJs" role="tab" data-toggle="tab">TS</a></li>
                    </ul>
                    <div className="tab-content">
                        <div className="tab-pane active pane-content" id="bfJsx">
                            {' <wjChartHierarchical.Sunburst\n'}
                            {'     itemsSource={this.data}\n'}
                            {'     binding="value"\n'}
                            {'     bindingName={["year", "quarter", "month"]}\n'}
                            {'     childItemsPath="items"\n'}
                            {'     palette={this.state.chartPalette}\n'}
                            {'     innerRadius={this.state.innerRadius}\n'}
                            {'     offset={this.state.offset}\n'}
                            {'     startAngle={this.state.startAngle}\n'}
                            {'     reversed={this.state.reversed}\n'}
                            {'     dataLabel={{ position: "Center", content: "{name}" }} />\n'}
                            {' <div className="form-horizontal">\n'}
                            {'     <div className="form-group">\n'}
                            {'         <label className="col-md-3 control-label">Inner Radius</label>\n'}
                            {'         <div className="col-md-9">\n'}
                            {'             <wjInput.InputNumber\n'}
                            {'                 value={this.state.innerRadius}\n'}
                            {'                 min={0}\n'}
                            {'                 max={1}\n'}
                            {'                 step={.1}\n'}
                            {'                 format="n"\n'}
                            {'                 valueChanged={this.innerRadiusChanged.bind(this)} />\n'}
                            {'         </div>\n'}
                            {'     </div>\n'}
                            {'     <div className="form-group">\n'}
                            {'         <label className="col-md-3 control-label">Offset</label>\n'}
                            {'         <div className="col-md-9">\n'}
                            {'             <wjInput.InputNumber\n'}
                            {'                 value={this.state.offset}\n'}
                            {'                 min={0}\n'}
                            {'                 max={1}\n'}
                            {'                 step={.1}\n'}
                            {'                 format="n"\n'}
                            {'                 valueChanged={this.offsetChanged.bind(this)} />\n'}
                            {'         </div>\n'}
                            {'     </div>\n'}
                            {'     <div className="form-group">\n'}
                            {'         <label className="col-md-3 control-label">Start Angle</label>\n'}
                            {'         <div className="col-md-9">\n'}
                            {'             <wjInput.InputNumber\n'}
                            {'                 value={this.state.startAngle}\n'}
                            {'                 min={0}\n'}
                            {'                 max={360}\n'}
                            {'                 step={60}\n'}
                            {'                 valueChanged={this.startAngleChanged.bind(this)} />\n'}
                            {'         </div>\n'}
                            {'     </div>\n'}
                            {'     <div className="form-group">\n'}
                            {'         <div className="col-md-offset-3 col-md-9">\n'}
                            {'             <wjInput.Menu\n'}
                            {'                 header={"Palette:  " + "<b>" + this.state.palette + "</b\n'}
                            {'                 itemsSource={this.palettes}\n'}
                            {'\n'}
                            {'                 itemClicked={this.paletteChanged.bind(this)} />\n'}
                            {'         </div>\n'}
                            {'     </div>\n'}
                            {'     <div className="form-group">\n'}
                            {'         <div className="col-md-offset-3 col-md-9">\n'}
                            {'             <div className="checkbox">\n'}
                            {'                 <label>\n'}
                            {'                     <input type="checkbox" name="reversed" checked={this.state.reversed}\n'}
                            {'                         onChange={this.stateChanged.bind(this)} /> Reversed?\n'}
                            {'             </label>\n'}
                            {'             </div>\n'}
                            {'         </div>\n'}
                            {'     </div>\n'}
                            {' </div>\n'}
                        </div>
                        <div className="tab-pane pane-content" id="bfJs">
                            {'  data = DataService.default.getHierarchicalData();\n'}
                           {'  palettes = [\'standard\', \'cocoa\', \'coral\', \'dark\', \'highcontrast\', \'light\', \'midnight\', \'minimal\', \'modern\', \'organic\', \'slate\'];\n'}
                           {'\n'}
                           {'  constructor(props) {\n'}
                           {'      super(props);\n'}
                           {'\n'}
                           {'      this.state = {\n'}
                           {'          innerRadius: 0,\n'}
                           {'          offset: 0,\n'}
                           {'          startAngle: 0,\n'}
                           {'          palette: \'standard\',\n'}
                           {'          chartPalette: wjcChart.Palettes[\'standard\'],\n'}
                           {'          reversed: false\n'}
                           {'      }\n'}
                           {'  }\n'}
                           {'\n'}
                           {'  paletteChanged(menu: wjcInput.Menu) {\n'}
                           {'      var selectedStacking = menu.selectedValue;\n'}
                           {'      this.setState({ palette: selectedStacking });\n'}
                           {'      this.setState({ chartPalette: wjcChart.Palettes[selectedStacking] });\n'}
                           {'  }\n'}
                           {'\n'}
                           {'  startAngleChanged(sender: wjcInput.InputNumber) {\n'}
                           {'      if (sender.value < sender.min || sender.value > sender.max) {\n'}
                           {'          return;\n'}
                           {'      }\n'}
                           {'      this.setState({ startAngle: sender.value });\n'}
                           {'  }\n'}
                           {'\n'}
                           {'  innerRadiusChanged(sender: wjcInput.InputNumber) {\n'}
                           {'      if (sender.value < sender.min || sender.value > sender.max) {\n'}
                           {'          return;\n'}
                           {'      }\n'}
                           {'      this.setState({ innerRadius: sender.value });\n'}
                           {'  }\n'}
                           {'\n'}
                           {'  offsetChanged(sender: wjcInput.InputNumber) {\n'}
                           {'      if (sender.value < sender.min || sender.value > sender.max) {\n'}
                           {'          return;\n'}
                           {'      }\n'}
                           {'      this.setState({ offset: sender.value });\n'}
                           {'  }\n'}
                           {'\n'}
                           {'  stateChanged(event) {\n'}
                           {'      var target = event.target,\n'}
                           {'          value = target.type === \'checkbox\' ? target.checked : target.value,\n'}
                           {'          name = target.name, labelContent;\n'}
                           {'\n'}
                           {'      this.setState({\n'}
                           {'          [name]: value\n'}
                           {'      });\n'}
                           {'  }\n'}
                        </div>
                    </div>
                </div>
                <div className="col-md-6">
                    <h4>Result (live):</h4>
                    <wjChartHierarchical.Sunburst
                        itemsSource={this.data}
                        binding="value"
                        bindingName={["year", "quarter", "month"]}
                        childItemsPath="items"
                        palette={this.state.chartPalette}
                        innerRadius={this.state.innerRadius}
                        offset={this.state.offset}
                        startAngle={this.state.startAngle}
                        reversed={this.state.reversed}
                        dataLabel={{ position: "Center", content: "{name}" }} />
                    <div className="form-horizontal">
                        <div className="form-group">
                            <label className="col-md-3 control-label">Inner Radius</label>
                            <div className="col-md-9">
                                <wjInput.InputNumber
                                    value={this.state.innerRadius}
                                    min={0}
                                    max={1}
                                    step={.1}
                                    format="n"
                                    valueChanged={this.innerRadiusChanged.bind(this)} />
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-md-3 control-label">Offset</label>
                            <div className="col-md-9">
                                <wjInput.InputNumber
                                    value={this.state.offset}
                                    min={0}
                                    max={1}
                                    step={.1}
                                    format="n"
                                    valueChanged={this.offsetChanged.bind(this)} />
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-md-3 control-label">Start Angle</label>
                            <div className="col-md-9">
                                <wjInput.InputNumber
                                    value={this.state.startAngle}
                                    min={0}
                                    max={360}
                                    step={60}
                                    valueChanged={this.startAngleChanged.bind(this)} />
                            </div>
                        </div>
                        <div className="form-group">
                            <div className="col-md-offset-3 col-md-9">
                                <wjInput.Menu
                                    header={"Palette:  " + "<b>" + this.state.palette + "</b>"}
                                    itemsSource={this.palettes}
                                    itemClicked={this.paletteChanged.bind(this)} />
                            </div>
                        </div>
                        <div className="form-group">
                            <div className="col-md-offset-3 col-md-9">
                                <div className="checkbox">
                                    <label>
                                        <input type="checkbox" name="reversed" checked={this.state.reversed}
                                            onChange={this.stateChanged.bind(this)} /> Reversed?
                                </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>;

    }
}

