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

const data = {
    nodes: [
        {
            id: 'John',
            nodeColor: 'hsl(204, 70%, 50%)',
        },
        {
            id: 'Raoul',
            nodeColor: 'hsl(19, 70%, 50%)',
        },
        {
            id: 'Jane',
            nodeColor: 'hsl(264, 70%, 50%)',
        },
        {
            id: 'Marcel',
            nodeColor: 'hsl(306, 70%, 50%)',
        },
        {
            id: 'Ibrahim',
            nodeColor: 'hsl(155, 70%, 50%)',
        },
        {
            id: 'Junko',
            nodeColor: 'hsl(345, 70%, 50%)',
        },
    ],
    links: [
        {
            source: 'Ibrahim',
            target: 'Raoul',
            value: 121,
        },
        {
            source: 'Ibrahim',
            target: 'Marcel',
            value: 21,
        },
        {
            source: 'Ibrahim',
            target: 'Jane',
            value: 198,
        },
        {
            source: 'Marcel',
            target: 'John',
            value: 130,
        },
        {
            source: 'Marcel',
            target: 'Jane',
            value: 79,
        },
        {
            source: 'Marcel',
            target: 'Raoul',
            value: 124,
        },
        {
            source: 'Marcel',
            target: 'Junko',
            value: 50,
        },
        {
            source: 'Raoul',
            target: 'John',
            value: 6,
        },
        {
            source: 'Junko',
            target: 'Raoul',
            value: 67,
        },
        {
            source: 'Junko',
            target: 'Jane',
            value: 69,
        },
        {
            source: 'Jane',
            target: 'Raoul',
            value: 100,
        },
    ],
};

export default createBoard({
    name: 'Sankey',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveSankey
                data={data}
                margin={{ top: 40, right: 160, bottom: 40, left: 50 }}
                align="justify"
                colors={{ scheme: 'category10' }}
                nodeOpacity={1}
                nodeHoverOthersOpacity={0.35}
                nodeThickness={18}
                nodeSpacing={24}
                nodeBorderWidth={0}
                nodeBorderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.8]],
                }}
                nodeBorderRadius={3}
                linkOpacity={0.5}
                linkHoverOthersOpacity={0.1}
                linkContract={3}
                enableLinkGradient={true}
                labelPosition="outside"
                labelOrientation="vertical"
                labelPadding={16}
                labelTextColor={{
                    from: 'color',
                    modifiers: [['darker', 1]],
                }}
                legends={[
                    {
                        anchor: 'bottom-right',
                        direction: 'column',
                        translateX: 130,
                        itemWidth: 100,
                        itemHeight: 14,
                        itemDirection: 'right-to-left',
                        itemsSpacing: 2,
                        itemTextColor: '#999',
                        symbolSize: 14,
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemTextColor: '#000',
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
});