import { createBoard } from '@wixc3/react-board';
import { ResponsiveCirclePacking } from '@nivo/circle-packing';
import cover from './cover.png';

const data = {
    name: 'nivo',
    color: 'hsl(325, 70%, 50%)',
    children: [
        {
            name: 'viz',
            color: 'hsl(285, 70%, 50%)',
            children: [
                {
                    name: 'stack',
                    color: 'hsl(67, 70%, 50%)',
                    children: [
                        {
                            name: 'cchart',
                            color: 'hsl(337, 70%, 50%)',
                            loc: 67130,
                        },
                        {
                            name: 'xAxis',
                            color: 'hsl(273, 70%, 50%)',
                            loc: 43010,
                        },
                        {
                            name: 'yAxis',
                            color: 'hsl(292, 70%, 50%)',
                            loc: 68020,
                        },
                        {
                            name: 'layers',
                            color: 'hsl(294, 70%, 50%)',
                            loc: 9650,
                        },
                    ],
                },
                {
                    name: 'ppie',
                    color: 'hsl(334, 70%, 50%)',
                    children: [
                        {
                            name: 'chart',
                            color: 'hsl(81, 70%, 50%)',
                            children: [
                                {
                                    name: 'pie',
                                    color: 'hsl(44, 70%, 50%)',
                                    children: [
                                        {
                                            name: 'outline',
                                            color: 'hsl(46, 70%, 50%)',
                                            loc: 19462,
                                        },
                                        {
                                            name: 'slices',
                                            color: 'hsl(108, 70%, 50%)',
                                            loc: 10153,
                                        },
                                        {
                                            name: 'bbox',
                                            color: 'hsl(165, 70%, 50%)',
                                            loc: 36876,
                                        },
                                    ],
                                },
                                {
                                    name: 'donut',
                                    color: 'hsl(178, 70%, 50%)',
                                    loc: 93917,
                                },
                                {
                                    name: 'gauge',
                                    color: 'hsl(360, 70%, 50%)',
                                    loc: 174011,
                                },
                            ],
                        },
                        {
                            name: 'legends',
                            color: 'hsl(39, 70%, 50%)',
                            loc: 13467,
                        },
                    ],
                },
            ],
        },
        {
            name: 'colors',
            color: 'hsl(68, 70%, 50%)',
            children: [
                {
                    name: 'rgb',
                    color: 'hsl(123, 70%, 50%)',
                    loc: 67400,
                },
                {
                    name: 'hsl',
                    color: 'hsl(70, 70%, 50%)',
                    loc: 133404,
                },
            ],
        },
        {
            name: 'utils',
            color: 'hsl(188, 70%, 50%)',
            children: [
                {
                    name: 'randomize',
                    color: 'hsl(193, 70%, 50%)',
                    loc: 178327,
                },
                {
                    name: 'resetClock',
                    color: 'hsl(18, 70%, 50%)',
                    loc: 112547,
                },
                {
                    name: 'noop',
                    color: 'hsl(202, 70%, 50%)',
                    loc: 144691,
                },
                {
                    name: 'tick',
                    color: 'hsl(168, 70%, 50%)',
                    loc: 53661,
                },
                {
                    name: 'forceGC',
                    color: 'hsl(117, 70%, 50%)',
                    loc: 102851,
                },
                {
                    name: 'stackTrace',
                    color: 'hsl(26, 70%, 50%)',
                    loc: 155732,
                },
                {
                    name: 'dbg',
                    color: 'hsl(120, 70%, 50%)',
                    loc: 191077,
                },
            ],
        },
        {
            name: 'generators',
            color: 'hsl(337, 70%, 50%)',
            children: [
                {
                    name: 'address',
                    color: 'hsl(176, 70%, 50%)',
                    loc: 98605,
                },
                {
                    name: 'city',
                    color: 'hsl(130, 70%, 50%)',
                    loc: 119452,
                },
                {
                    name: 'animal',
                    color: 'hsl(17, 70%, 50%)',
                    loc: 30440,
                },
                {
                    name: 'movie',
                    color: 'hsl(83, 70%, 50%)',
                    loc: 112322,
                },
                {
                    name: 'user',
                    color: 'hsl(196, 70%, 50%)',
                    loc: 123288,
                },
            ],
        },
        {
            name: 'set',
            color: 'hsl(320, 70%, 50%)',
            children: [
                {
                    name: 'clone',
                    color: 'hsl(109, 70%, 50%)',
                    loc: 37528,
                },
                {
                    name: 'intersect',
                    color: 'hsl(303, 70%, 50%)',
                    loc: 43949,
                },
                {
                    name: 'merge',
                    color: 'hsl(109, 70%, 50%)',
                    loc: 84087,
                },
                {
                    name: 'reverse',
                    color: 'hsl(115, 70%, 50%)',
                    loc: 121784,
                },
                {
                    name: 'toArray',
                    color: 'hsl(346, 70%, 50%)',
                    loc: 133547,
                },
                {
                    name: 'toObject',
                    color: 'hsl(133, 70%, 50%)',
                    loc: 193819,
                },
                {
                    name: 'fromCSV',
                    color: 'hsl(94, 70%, 50%)',
                    loc: 186101,
                },
                {
                    name: 'slice',
                    color: 'hsl(155, 70%, 50%)',
                    loc: 140186,
                },
                {
                    name: 'append',
                    color: 'hsl(18, 70%, 50%)',
                    loc: 192263,
                },
                {
                    name: 'prepend',
                    color: 'hsl(132, 70%, 50%)',
                    loc: 27416,
                },
                {
                    name: 'shuffle',
                    color: 'hsl(322, 70%, 50%)',
                    loc: 58522,
                },
                {
                    name: 'pick',
                    color: 'hsl(160, 70%, 50%)',
                    loc: 88124,
                },
                {
                    name: 'plouc',
                    color: 'hsl(110, 70%, 50%)',
                    loc: 164564,
                },
            ],
        },
        {
            name: 'text',
            color: 'hsl(281, 70%, 50%)',
            children: [
                {
                    name: 'trim',
                    color: 'hsl(104, 70%, 50%)',
                    loc: 102133,
                },
                {
                    name: 'slugify',
                    color: 'hsl(330, 70%, 50%)',
                    loc: 79694,
                },
                {
                    name: 'snakeCase',
                    color: 'hsl(270, 70%, 50%)',
                    loc: 78091,
                },
                {
                    name: 'camelCase',
                    color: 'hsl(349, 70%, 50%)',
                    loc: 55542,
                },
                {
                    name: 'repeat',
                    color: 'hsl(166, 70%, 50%)',
                    loc: 3957,
                },
                {
                    name: 'padLeft',
                    color: 'hsl(313, 70%, 50%)',
                    loc: 140936,
                },
                {
                    name: 'padRight',
                    color: 'hsl(62, 70%, 50%)',
                    loc: 128933,
                },
                {
                    name: 'sanitize',
                    color: 'hsl(231, 70%, 50%)',
                    loc: 44268,
                },
                {
                    name: 'ploucify',
                    color: 'hsl(103, 70%, 50%)',
                    loc: 183261,
                },
            ],
        },
        {
            name: 'misc',
            color: 'hsl(285, 70%, 50%)',
            children: [
                {
                    name: 'greetings',
                    color: 'hsl(166, 70%, 50%)',
                    children: [
                        {
                            name: 'hey',
                            color: 'hsl(27, 70%, 50%)',
                            loc: 52887,
                        },
                        {
                            name: 'HOWDY',
                            color: 'hsl(292, 70%, 50%)',
                            loc: 76845,
                        },
                        {
                            name: 'aloha',
                            color: 'hsl(230, 70%, 50%)',
                            loc: 22445,
                        },
                        {
                            name: 'AHOY',
                            color: 'hsl(231, 70%, 50%)',
                            loc: 61881,
                        },
                    ],
                },
                {
                    name: 'other',
                    color: 'hsl(178, 70%, 50%)',
                    loc: 133034,
                },
                {
                    name: 'path',
                    color: 'hsl(79, 70%, 50%)',
                    children: [
                        {
                            name: 'pathA',
                            color: 'hsl(221, 70%, 50%)',
                            loc: 123389,
                        },
                        {
                            name: 'pathB',
                            color: 'hsl(123, 70%, 50%)',
                            children: [
                                {
                                    name: 'pathB1',
                                    color: 'hsl(345, 70%, 50%)',
                                    loc: 193710,
                                },
                                {
                                    name: 'pathB2',
                                    color: 'hsl(27, 70%, 50%)',
                                    loc: 76856,
                                },
                                {
                                    name: 'pathB3',
                                    color: 'hsl(172, 70%, 50%)',
                                    loc: 185656,
                                },
                                {
                                    name: 'pathB4',
                                    color: 'hsl(308, 70%, 50%)',
                                    loc: 45433,
                                },
                            ],
                        },
                        {
                            name: 'pathC',
                            color: 'hsl(77, 70%, 50%)',
                            children: [
                                {
                                    name: 'pathC1',
                                    color: 'hsl(181, 70%, 50%)',
                                    loc: 123984,
                                },
                                {
                                    name: 'pathC2',
                                    color: 'hsl(202, 70%, 50%)',
                                    loc: 74946,
                                },
                                {
                                    name: 'pathC3',
                                    color: 'hsl(147, 70%, 50%)',
                                    loc: 19009,
                                },
                                {
                                    name: 'pathC4',
                                    color: 'hsl(356, 70%, 50%)',
                                    loc: 115974,
                                },
                                {
                                    name: 'pathC5',
                                    color: 'hsl(237, 70%, 50%)',
                                    loc: 6746,
                                },
                                {
                                    name: 'pathC6',
                                    color: 'hsl(105, 70%, 50%)',
                                    loc: 59951,
                                },
                                {
                                    name: 'pathC7',
                                    color: 'hsl(255, 70%, 50%)',
                                    loc: 100121,
                                },
                                {
                                    name: 'pathC8',
                                    color: 'hsl(205, 70%, 50%)',
                                    loc: 19447,
                                },
                                {
                                    name: 'pathC9',
                                    color: 'hsl(32, 70%, 50%)',
                                    loc: 141772,
                                },
                            ],
                        },
                    ],
                },
            ],
        },
    ],
};

export default createBoard({
    name: 'CirclePacking',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveCirclePacking
                data={data}
                margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
                id="name"
                value="loc"
                colors={{ scheme: 'nivo' }}
                childColor={{
                    from: 'color',
                    modifiers: [['brighter', 0.4]],
                }}
                padding={4}
                enableLabels={true}
                labelsFilter={(n) => 2 === n.node.depth}
                labelsSkipRadius={10}
                labelTextColor={{
                    from: 'color',
                    modifiers: [['darker', 2]],
                }}
                borderWidth={1}
                borderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.5]],
                }}
                defs={[
                    {
                        id: 'lines',
                        type: 'patternLines',
                        background: 'none',
                        color: 'inherit',
                        rotation: -45,
                        lineWidth: 5,
                        spacing: 8,
                    },
                ]}
                fill={[
                    {
                        match: {
                            depth: 1,
                        },
                        id: 'lines',
                    },
                ]}
            />
        </div>
    ),
    cover,
    isSnippet: true,
});