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

const data = {
    name: 'nivo',
    color: 'hsl(142, 70%, 50%)',
    children: [
        {
            name: 'viz',
            color: 'hsl(47, 70%, 50%)',
            children: [
                {
                    name: 'stack',
                    color: 'hsl(44, 70%, 50%)',
                    children: [
                        {
                            name: 'cchart',
                            color: 'hsl(172, 70%, 50%)',
                            loc: 79257,
                        },
                        {
                            name: 'xAxis',
                            color: 'hsl(5, 70%, 50%)',
                            loc: 171952,
                        },
                        {
                            name: 'yAxis',
                            color: 'hsl(261, 70%, 50%)',
                            loc: 153455,
                        },
                        {
                            name: 'layers',
                            color: 'hsl(281, 70%, 50%)',
                            loc: 120369,
                        },
                    ],
                },
                {
                    name: 'ppie',
                    color: 'hsl(323, 70%, 50%)',
                    children: [
                        {
                            name: 'chart',
                            color: 'hsl(285, 70%, 50%)',
                            children: [
                                {
                                    name: 'pie',
                                    color: 'hsl(325, 70%, 50%)',
                                    children: [
                                        {
                                            name: 'outline',
                                            color: 'hsl(172, 70%, 50%)',
                                            loc: 105045,
                                        },
                                        {
                                            name: 'slices',
                                            color: 'hsl(340, 70%, 50%)',
                                            loc: 191862,
                                        },
                                        {
                                            name: 'bbox',
                                            color: 'hsl(330, 70%, 50%)',
                                            loc: 81402,
                                        },
                                    ],
                                },
                                {
                                    name: 'donut',
                                    color: 'hsl(350, 70%, 50%)',
                                    loc: 179088,
                                },
                                {
                                    name: 'gauge',
                                    color: 'hsl(323, 70%, 50%)',
                                    loc: 126677,
                                },
                            ],
                        },
                        {
                            name: 'legends',
                            color: 'hsl(308, 70%, 50%)',
                            loc: 56713,
                        },
                    ],
                },
            ],
        },
        {
            name: 'colors',
            color: 'hsl(143, 70%, 50%)',
            children: [
                {
                    name: 'rgb',
                    color: 'hsl(338, 70%, 50%)',
                    loc: 154139,
                },
                {
                    name: 'hsl',
                    color: 'hsl(161, 70%, 50%)',
                    loc: 98789,
                },
            ],
        },
        {
            name: 'utils',
            color: 'hsl(156, 70%, 50%)',
            children: [
                {
                    name: 'randomize',
                    color: 'hsl(271, 70%, 50%)',
                    loc: 84889,
                },
                {
                    name: 'resetClock',
                    color: 'hsl(211, 70%, 50%)',
                    loc: 78018,
                },
                {
                    name: 'noop',
                    color: 'hsl(313, 70%, 50%)',
                    loc: 139938,
                },
                {
                    name: 'tick',
                    color: 'hsl(96, 70%, 50%)',
                    loc: 15922,
                },
                {
                    name: 'forceGC',
                    color: 'hsl(214, 70%, 50%)',
                    loc: 73058,
                },
                {
                    name: 'stackTrace',
                    color: 'hsl(217, 70%, 50%)',
                    loc: 185282,
                },
                {
                    name: 'dbg',
                    color: 'hsl(196, 70%, 50%)',
                    loc: 97276,
                },
            ],
        },
        {
            name: 'generators',
            color: 'hsl(66, 70%, 50%)',
            children: [
                {
                    name: 'address',
                    color: 'hsl(271, 70%, 50%)',
                    loc: 120150,
                },
                {
                    name: 'city',
                    color: 'hsl(147, 70%, 50%)',
                    loc: 83215,
                },
                {
                    name: 'animal',
                    color: 'hsl(161, 70%, 50%)',
                    loc: 173076,
                },
                {
                    name: 'movie',
                    color: 'hsl(117, 70%, 50%)',
                    loc: 26685,
                },
                {
                    name: 'user',
                    color: 'hsl(168, 70%, 50%)',
                    loc: 197585,
                },
            ],
        },
        {
            name: 'set',
            color: 'hsl(92, 70%, 50%)',
            children: [
                {
                    name: 'clone',
                    color: 'hsl(261, 70%, 50%)',
                    loc: 110463,
                },
                {
                    name: 'intersect',
                    color: 'hsl(316, 70%, 50%)',
                    loc: 13122,
                },
                {
                    name: 'merge',
                    color: 'hsl(38, 70%, 50%)',
                    loc: 70963,
                },
                {
                    name: 'reverse',
                    color: 'hsl(45, 70%, 50%)',
                    loc: 180430,
                },
                {
                    name: 'toArray',
                    color: 'hsl(311, 70%, 50%)',
                    loc: 118191,
                },
                {
                    name: 'toObject',
                    color: 'hsl(41, 70%, 50%)',
                    loc: 91595,
                },
                {
                    name: 'fromCSV',
                    color: 'hsl(99, 70%, 50%)',
                    loc: 57967,
                },
                {
                    name: 'slice',
                    color: 'hsl(85, 70%, 50%)',
                    loc: 182729,
                },
                {
                    name: 'append',
                    color: 'hsl(344, 70%, 50%)',
                    loc: 94482,
                },
                {
                    name: 'prepend',
                    color: 'hsl(289, 70%, 50%)',
                    loc: 35658,
                },
                {
                    name: 'shuffle',
                    color: 'hsl(35, 70%, 50%)',
                    loc: 148193,
                },
                {
                    name: 'pick',
                    color: 'hsl(92, 70%, 50%)',
                    loc: 23896,
                },
                {
                    name: 'plouc',
                    color: 'hsl(247, 70%, 50%)',
                    loc: 191375,
                },
            ],
        },
        {
            name: 'text',
            color: 'hsl(190, 70%, 50%)',
            children: [
                {
                    name: 'trim',
                    color: 'hsl(65, 70%, 50%)',
                    loc: 83252,
                },
                {
                    name: 'slugify',
                    color: 'hsl(159, 70%, 50%)',
                    loc: 121351,
                },
                {
                    name: 'snakeCase',
                    color: 'hsl(209, 70%, 50%)',
                    loc: 123516,
                },
                {
                    name: 'camelCase',
                    color: 'hsl(175, 70%, 50%)',
                    loc: 92269,
                },
                {
                    name: 'repeat',
                    color: 'hsl(271, 70%, 50%)',
                    loc: 21265,
                },
                {
                    name: 'padLeft',
                    color: 'hsl(88, 70%, 50%)',
                    loc: 98605,
                },
                {
                    name: 'padRight',
                    color: 'hsl(324, 70%, 50%)',
                    loc: 92755,
                },
                {
                    name: 'sanitize',
                    color: 'hsl(222, 70%, 50%)',
                    loc: 95905,
                },
                {
                    name: 'ploucify',
                    color: 'hsl(114, 70%, 50%)',
                    loc: 125717,
                },
            ],
        },
        {
            name: 'misc',
            color: 'hsl(101, 70%, 50%)',
            children: [
                {
                    name: 'greetings',
                    color: 'hsl(248, 70%, 50%)',
                    children: [
                        {
                            name: 'hey',
                            color: 'hsl(304, 70%, 50%)',
                            loc: 146174,
                        },
                        {
                            name: 'HOWDY',
                            color: 'hsl(97, 70%, 50%)',
                            loc: 113410,
                        },
                        {
                            name: 'aloha',
                            color: 'hsl(221, 70%, 50%)',
                            loc: 66225,
                        },
                        {
                            name: 'AHOY',
                            color: 'hsl(319, 70%, 50%)',
                            loc: 193014,
                        },
                    ],
                },
                {
                    name: 'other',
                    color: 'hsl(329, 70%, 50%)',
                    loc: 77655,
                },
                {
                    name: 'path',
                    color: 'hsl(183, 70%, 50%)',
                    children: [
                        {
                            name: 'pathA',
                            color: 'hsl(7, 70%, 50%)',
                            loc: 62166,
                        },
                        {
                            name: 'pathB',
                            color: 'hsl(264, 70%, 50%)',
                            children: [
                                {
                                    name: 'pathB1',
                                    color: 'hsl(239, 70%, 50%)',
                                    loc: 142858,
                                },
                                {
                                    name: 'pathB2',
                                    color: 'hsl(310, 70%, 50%)',
                                    loc: 35006,
                                },
                                {
                                    name: 'pathB3',
                                    color: 'hsl(60, 70%, 50%)',
                                    loc: 32565,
                                },
                                {
                                    name: 'pathB4',
                                    color: 'hsl(256, 70%, 50%)',
                                    loc: 57960,
                                },
                            ],
                        },
                        {
                            name: 'pathC',
                            color: 'hsl(31, 70%, 50%)',
                            children: [
                                {
                                    name: 'pathC1',
                                    color: 'hsl(161, 70%, 50%)',
                                    loc: 175963,
                                },
                                {
                                    name: 'pathC2',
                                    color: 'hsl(40, 70%, 50%)',
                                    loc: 174191,
                                },
                                {
                                    name: 'pathC3',
                                    color: 'hsl(45, 70%, 50%)',
                                    loc: 20962,
                                },
                                {
                                    name: 'pathC4',
                                    color: 'hsl(281, 70%, 50%)',
                                    loc: 57534,
                                },
                                {
                                    name: 'pathC5',
                                    color: 'hsl(254, 70%, 50%)',
                                    loc: 130484,
                                },
                                {
                                    name: 'pathC6',
                                    color: 'hsl(175, 70%, 50%)',
                                    loc: 49584,
                                },
                                {
                                    name: 'pathC7',
                                    color: 'hsl(290, 70%, 50%)',
                                    loc: 180752,
                                },
                                {
                                    name: 'pathC8',
                                    color: 'hsl(263, 70%, 50%)',
                                    loc: 163373,
                                },
                                {
                                    name: 'pathC9',
                                    color: 'hsl(240, 70%, 50%)',
                                    loc: 156228,
                                },
                            ],
                        },
                    ],
                },
            ],
        },
    ],
};

export default createBoard({
    name: 'Treemap',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveTreeMap
                data={data}
                identity="name"
                value="loc"
                valueFormat=".02s"
                margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
                labelSkipSize={12}
                labelTextColor={{
                    from: 'color',
                    modifiers: [['darker', 1.2]],
                }}
                parentLabelPosition="left"
                parentLabelTextColor={{
                    from: 'color',
                    modifiers: [['darker', 2]],
                }}
                borderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.1]],
                }}
            />
        </div>
    ),
    cover,
});