import { createBoard } from '@wixc3/react-board';
import { ResponsiveSunburst } from '@nivo/sunburst';
import cover from './cover.png';

const data = {
    name: 'nivo',
    color: 'hsl(292, 70%, 50%)',
    children: [
        {
            name: 'viz',
            color: 'hsl(215, 70%, 50%)',
            children: [
                {
                    name: 'stack',
                    color: 'hsl(10, 70%, 50%)',
                    children: [
                        {
                            name: 'cchart',
                            color: 'hsl(188, 70%, 50%)',
                            loc: 186950,
                        },
                        {
                            name: 'xAxis',
                            color: 'hsl(350, 70%, 50%)',
                            loc: 85719,
                        },
                        {
                            name: 'yAxis',
                            color: 'hsl(7, 70%, 50%)',
                            loc: 132540,
                        },
                        {
                            name: 'layers',
                            color: 'hsl(36, 70%, 50%)',
                            loc: 190837,
                        },
                    ],
                },
                {
                    name: 'ppie',
                    color: 'hsl(110, 70%, 50%)',
                    children: [
                        {
                            name: 'chart',
                            color: 'hsl(226, 70%, 50%)',
                            children: [
                                {
                                    name: 'pie',
                                    color: 'hsl(132, 70%, 50%)',
                                    children: [
                                        {
                                            name: 'outline',
                                            color: 'hsl(8, 70%, 50%)',
                                            loc: 111039,
                                        },
                                        {
                                            name: 'slices',
                                            color: 'hsl(277, 70%, 50%)',
                                            loc: 53686,
                                        },
                                        {
                                            name: 'bbox',
                                            color: 'hsl(117, 70%, 50%)',
                                            loc: 100255,
                                        },
                                    ],
                                },
                                {
                                    name: 'donut',
                                    color: 'hsl(357, 70%, 50%)',
                                    loc: 78910,
                                },
                                {
                                    name: 'gauge',
                                    color: 'hsl(168, 70%, 50%)',
                                    loc: 108886,
                                },
                            ],
                        },
                        {
                            name: 'legends',
                            color: 'hsl(2, 70%, 50%)',
                            loc: 47511,
                        },
                    ],
                },
            ],
        },
        {
            name: 'colors',
            color: 'hsl(67, 70%, 50%)',
            children: [
                {
                    name: 'rgb',
                    color: 'hsl(119, 70%, 50%)',
                    loc: 43656,
                },
                {
                    name: 'hsl',
                    color: 'hsl(154, 70%, 50%)',
                    loc: 181905,
                },
            ],
        },
        {
            name: 'utils',
            color: 'hsl(355, 70%, 50%)',
            children: [
                {
                    name: 'randomize',
                    color: 'hsl(138, 70%, 50%)',
                    loc: 39344,
                },
                {
                    name: 'resetClock',
                    color: 'hsl(56, 70%, 50%)',
                    loc: 60544,
                },
                {
                    name: 'noop',
                    color: 'hsl(92, 70%, 50%)',
                    loc: 153183,
                },
                {
                    name: 'tick',
                    color: 'hsl(341, 70%, 50%)',
                    loc: 36470,
                },
                {
                    name: 'forceGC',
                    color: 'hsl(335, 70%, 50%)',
                    loc: 92700,
                },
                {
                    name: 'stackTrace',
                    color: 'hsl(327, 70%, 50%)',
                    loc: 173128,
                },
                {
                    name: 'dbg',
                    color: 'hsl(99, 70%, 50%)',
                    loc: 159814,
                },
            ],
        },
        {
            name: 'generators',
            color: 'hsl(62, 70%, 50%)',
            children: [
                {
                    name: 'address',
                    color: 'hsl(33, 70%, 50%)',
                    loc: 112781,
                },
                {
                    name: 'city',
                    color: 'hsl(92, 70%, 50%)',
                    loc: 125549,
                },
                {
                    name: 'animal',
                    color: 'hsl(360, 70%, 50%)',
                    loc: 33527,
                },
                {
                    name: 'movie',
                    color: 'hsl(122, 70%, 50%)',
                    loc: 119713,
                },
                {
                    name: 'user',
                    color: 'hsl(178, 70%, 50%)',
                    loc: 164311,
                },
            ],
        },
        {
            name: 'set',
            color: 'hsl(158, 70%, 50%)',
            children: [
                {
                    name: 'clone',
                    color: 'hsl(256, 70%, 50%)',
                    loc: 199667,
                },
                {
                    name: 'intersect',
                    color: 'hsl(158, 70%, 50%)',
                    loc: 71377,
                },
                {
                    name: 'merge',
                    color: 'hsl(177, 70%, 50%)',
                    loc: 71725,
                },
                {
                    name: 'reverse',
                    color: 'hsl(21, 70%, 50%)',
                    loc: 12213,
                },
                {
                    name: 'toArray',
                    color: 'hsl(223, 70%, 50%)',
                    loc: 39854,
                },
                {
                    name: 'toObject',
                    color: 'hsl(178, 70%, 50%)',
                    loc: 131137,
                },
                {
                    name: 'fromCSV',
                    color: 'hsl(107, 70%, 50%)',
                    loc: 28969,
                },
                {
                    name: 'slice',
                    color: 'hsl(265, 70%, 50%)',
                    loc: 71369,
                },
                {
                    name: 'append',
                    color: 'hsl(342, 70%, 50%)',
                    loc: 70463,
                },
                {
                    name: 'prepend',
                    color: 'hsl(196, 70%, 50%)',
                    loc: 48260,
                },
                {
                    name: 'shuffle',
                    color: 'hsl(2, 70%, 50%)',
                    loc: 109132,
                },
                {
                    name: 'pick',
                    color: 'hsl(127, 70%, 50%)',
                    loc: 122963,
                },
                {
                    name: 'plouc',
                    color: 'hsl(1, 70%, 50%)',
                    loc: 116689,
                },
            ],
        },
        {
            name: 'text',
            color: 'hsl(87, 70%, 50%)',
            children: [
                {
                    name: 'trim',
                    color: 'hsl(104, 70%, 50%)',
                    loc: 5450,
                },
                {
                    name: 'slugify',
                    color: 'hsl(136, 70%, 50%)',
                    loc: 162488,
                },
                {
                    name: 'snakeCase',
                    color: 'hsl(258, 70%, 50%)',
                    loc: 143313,
                },
                {
                    name: 'camelCase',
                    color: 'hsl(149, 70%, 50%)',
                    loc: 132266,
                },
                {
                    name: 'repeat',
                    color: 'hsl(47, 70%, 50%)',
                    loc: 194749,
                },
                {
                    name: 'padLeft',
                    color: 'hsl(226, 70%, 50%)',
                    loc: 37064,
                },
                {
                    name: 'padRight',
                    color: 'hsl(124, 70%, 50%)',
                    loc: 159576,
                },
                {
                    name: 'sanitize',
                    color: 'hsl(335, 70%, 50%)',
                    loc: 170099,
                },
                {
                    name: 'ploucify',
                    color: 'hsl(158, 70%, 50%)',
                    loc: 41931,
                },
            ],
        },
        {
            name: 'misc',
            color: 'hsl(57, 70%, 50%)',
            children: [
                {
                    name: 'greetings',
                    color: 'hsl(260, 70%, 50%)',
                    children: [
                        {
                            name: 'hey',
                            color: 'hsl(179, 70%, 50%)',
                            loc: 178093,
                        },
                        {
                            name: 'HOWDY',
                            color: 'hsl(90, 70%, 50%)',
                            loc: 8229,
                        },
                        {
                            name: 'aloha',
                            color: 'hsl(293, 70%, 50%)',
                            loc: 143143,
                        },
                        {
                            name: 'AHOY',
                            color: 'hsl(7, 70%, 50%)',
                            loc: 121550,
                        },
                    ],
                },
                {
                    name: 'other',
                    color: 'hsl(76, 70%, 50%)',
                    loc: 195182,
                },
                {
                    name: 'path',
                    color: 'hsl(43, 70%, 50%)',
                    children: [
                        {
                            name: 'pathA',
                            color: 'hsl(265, 70%, 50%)',
                            loc: 118644,
                        },
                        {
                            name: 'pathB',
                            color: 'hsl(2, 70%, 50%)',
                            children: [
                                {
                                    name: 'pathB1',
                                    color: 'hsl(73, 70%, 50%)',
                                    loc: 60376,
                                },
                                {
                                    name: 'pathB2',
                                    color: 'hsl(298, 70%, 50%)',
                                    loc: 38867,
                                },
                                {
                                    name: 'pathB3',
                                    color: 'hsl(184, 70%, 50%)',
                                    loc: 145880,
                                },
                                {
                                    name: 'pathB4',
                                    color: 'hsl(87, 70%, 50%)',
                                    loc: 90822,
                                },
                            ],
                        },
                        {
                            name: 'pathC',
                            color: 'hsl(185, 70%, 50%)',
                            children: [
                                {
                                    name: 'pathC1',
                                    color: 'hsl(63, 70%, 50%)',
                                    loc: 195365,
                                },
                                {
                                    name: 'pathC2',
                                    color: 'hsl(71, 70%, 50%)',
                                    loc: 19734,
                                },
                                {
                                    name: 'pathC3',
                                    color: 'hsl(34, 70%, 50%)',
                                    loc: 25226,
                                },
                                {
                                    name: 'pathC4',
                                    color: 'hsl(316, 70%, 50%)',
                                    loc: 4963,
                                },
                                {
                                    name: 'pathC5',
                                    color: 'hsl(267, 70%, 50%)',
                                    loc: 25062,
                                },
                                {
                                    name: 'pathC6',
                                    color: 'hsl(283, 70%, 50%)',
                                    loc: 132805,
                                },
                                {
                                    name: 'pathC7',
                                    color: 'hsl(137, 70%, 50%)',
                                    loc: 3649,
                                },
                                {
                                    name: 'pathC8',
                                    color: 'hsl(56, 70%, 50%)',
                                    loc: 197627,
                                },
                                {
                                    name: 'pathC9',
                                    color: 'hsl(201, 70%, 50%)',
                                    loc: 89717,
                                },
                            ],
                        },
                    ],
                },
            ],
        },
    ],
};

export default createBoard({
    name: 'Sunburst',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveSunburst
                data={data}
                margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
                id="name"
                value="loc"
                cornerRadius={2}
                borderColor={{ theme: 'background' }}
                colors={{ scheme: 'nivo' }}
                childColor={{
                    from: 'color',
                    modifiers: [['brighter', 0.1]],
                }}
                enableArcLabels={true}
                arcLabelsSkipAngle={10}
                arcLabelsTextColor={{
                    from: 'color',
                    modifiers: [['darker', 1.4]],
                }}
            />
        </div>
    ),
    cover,
});