import * as React from 'react';
import { useMemo } from 'react';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';

const App = () => {
    const data = useMemo(() => [
        { Person: 'Planning', M1_From: 2, M1_To: 5, M2_From: 5, M2_To: 10 },
        { Person: 'Dev 1', M1_From: 5, M1_To: 7, M2_From: 9, M2_To: 17 },
        { Person: 'Dev 2', M1_From: 5, M1_To: 12, M2_From: 14, M2_To: 22 },
        { Person: 'QA 1', M1_From: 7, M1_To: 14, M2_From: 14, M2_To: 25 }
    ], []);

    const toolTipCustomFormatFn = React.useCallback(
        (value: any, itemIndex: any, serie: any, group: any, categoryValue: any, categoryAxis: any) => {
            return '<DIV style="text-align:left"><b>Team: ' + categoryValue +
                '</b><br />Start day: ' + value.from +
                '<br />End day: ' + value.to;
        }, []
    );

    const chartProps = useMemo<IChartProps>(() => ({
        padding: { left: 5, top: 5, right: 10, bottom: 5 },
        seriesGroups: [
            {
                columnsGapPercent: 100,
                orientation: 'horizontal',
                series: [
                    { dataFieldFrom: 'M1_From', dataFieldTo: 'M1_To', displayText: 'Sprint 1', opacity: 1 },
                    { dataFieldFrom: 'M2_From', dataFieldTo: 'M2_To', displayText: 'Sprint 2', opacity: 1 }
                ],
                toolTipFormatFunction: toolTipCustomFormatFn,
                type: 'rangecolumn',
                valueAxis:
                {
                    bands: [
                        { minValue: 13, maxValue: 16, fillColor: '#00FF00', opacity: 0.15 },
                        { minValue: 24, maxValue: 27, fillColor: '#0000FF', opacity: 0.20 },
                        { minValue: 29, maxValue: 29, fillColor: '#FF0000', opacity: 0.5, lineWidth: 3 }
                    ],
                    flip: true,
                    maxValue: 30,
                    minValue: 1,
                    tickMarks: { color: '#BCBCBC' },
                    title: { text: 'Day' },
                    unitInterval: 1
                }
            }
        ],
        source: data,
        titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
        xAxis: {
            dataField: 'Person',
            tickMarks: {
                color: '#BCBCBC',
                interval: 1,
                visible: true
            },
            unitInterval: 1
        }
    }), [data, toolTipCustomFormatFn]);

    return (
        <JqxChart
            style={{ width: '850px', height: '500px' }}
            title={chartProps.title}
            description={chartProps.description}
            showLegend={true}
            enableAnimations={true}
            padding={chartProps.padding}
            titlePadding={chartProps.titlePadding}
            source={chartProps.source}
            xAxis={chartProps.xAxis}
            seriesGroups={chartProps.seriesGroups}
            colorScheme={'scheme03'}
        />
    );
};

export default App;