import * as React from 'react';
import {withInfo} from '@storybook/addon-info';
import {storyLayout} from '../../index.stories';
import {JsonDifference, JsonDifferenceCompareMethod} from './JsonDifference';
import {boolean, text, number, withKnobs, select}  from '@storybook/addon-knobs';

// eslint-disable-next-line no-restricted-syntax
export default {
    title: 'JsonDifference',
    decorators: [withInfo, storyLayout, withKnobs]
};

const jsonLeft = JSON.stringify({
    start: 0,
    end: 2,
    a: {
        start: -1,
        end: 33,
        child: {
            wair: 'assa',
            _for: 'foooor'
        }
    },
    b: {
        hell: 'b-component',
        start: -1,
        child: {
            child: {
                child: {
                    name: 'child'
                }
            }
        }
    },
    c: {
        hell: 'c-component',
        start: -1,
        child: {
            child: {
                child: {
                    name: 'child'
                }
            }
        }
    },
    d: {
        hell: 'd-component',
        start: -1,
        child: {
            child: {
                child: {
                    name: 'child'
                }
            }
        }
    },
    e: {
        hell: 'e component',
        start: -1,
        childs: ['wow', 'waw']
    },
    f: {
        hell: 'f component',
        start: -1,
        child: {}
    }
}, null, 2);

const jsonRight = JSON.stringify({
    start: 0,
    end: 2,
    a: {
        start: -1,
        end: 33,
        child: {
            wair: 'ffff',
            _for: 'foooor'
        }
    },
    b: {
        hell: 'b-component',
        start: 0,
        child: {
            child: {
                childFix: {
                    name: 'child'
                }
            }
        }
    },
    c: {
        hell: 'c-component',
        start: -1,
        child: {
            child: {
                child: {
                    name: 'child2'
                }
            }
        }
    },
    e: {
        hell: 'e component',
        start: -1,
        childs: ['wow', 'waw', 'raw']
    },
    f: {
        hell: 'f component',
        start: -1,
        child: {
            oneMore: 'yes'
        }
    }
}, null, 2);

export const JsonDifferenceExample = () => {
    const codeFoldMessageRenderer = (totalFoldedLines: number) => {
        let line: string = '';

        const lastNum = totalFoldedLines % 10;

        if (lastNum === 1) {
            line = 'линию';
        } else if (1 < totalFoldedLines && totalFoldedLines < 5) {
            line = 'линии';
        } else {
            line = 'линий';
        }

        return (
            <div>
                {`Раскрыть ${totalFoldedLines} ${line}`}
            </div>
        );
    };

    return (
        <div>
            <JsonDifference
                oldValue={jsonLeft}
                newValue={jsonRight}
                splitView={boolean('splitView', true)}
                disableWordDiff={boolean('disableWordDiff', false)}
                hideLineNumbers={boolean('hideLineNumbers', false)}
                showDiffOnly={boolean('showDiffOnly', true)}
                useDarkTheme={boolean('useDarkTheme', true)}
                leftTitle={text('leftTitle', 'Left Title')}
                rightTitle={text('rightTitle', 'Right Title')}
                linesOffset={number('linesOffset', 0)}
                codeFoldMessageRenderer={codeFoldMessageRenderer}
                compareMethod={select('compareMethod', {
                    NONE: undefined,
                    CHARS: JsonDifferenceCompareMethod.CHARS,
                    SENTENCES: JsonDifferenceCompareMethod.SENTENCES,
                    WORDS: JsonDifferenceCompareMethod.WORDS,
                    WORDS_WITH_SPACE: JsonDifferenceCompareMethod.WORDS_WITH_SPACE,
                    CSS: JsonDifferenceCompareMethod.CSS,
                    LINES: JsonDifferenceCompareMethod.LINES,
                    TRIMMED_LINES: JsonDifferenceCompareMethod.TRIMMED_LINES
                }, undefined)}
            />
        </div>
    );
};