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

const data = [
    {
        statement: "it's good",
        participation: 16,
        stronglyAgree: 13,
        agree: 6,
        disagree: 28,
        stronglyDisagree: 14,
    },
    {
        statement: "it's sweet",
        participation: 32,
        stronglyAgree: 18,
        agree: 3,
        disagree: 22,
        stronglyDisagree: 22,
    },
    {
        statement: "it's spicy",
        participation: 25,
        stronglyAgree: 3,
        agree: 22,
        disagree: 3,
        stronglyDisagree: 20,
    },
    {
        statement: 'worth eating',
        participation: 20,
        stronglyAgree: 16,
        agree: 22,
        disagree: 18,
        stronglyDisagree: 7,
    },
    {
        statement: 'worth buying',
        participation: 4,
        stronglyAgree: 32,
        agree: 2,
        disagree: 12,
        stronglyDisagree: 31,
    },
];

export default createBoard({
    name: 'Marimekko',
    Board: () => (
        <div style={{ width: '800px', height: '400px' }}>
            <ResponsiveMarimekko
                data={data}
                id="statement"
                value="participation"
                dimensions={[
                    {
                        id: 'disagree strongly',
                        value: 'stronglyDisagree',
                    },
                    {
                        id: 'disagree',
                        value: 'disagree',
                    },
                    {
                        id: 'agree',
                        value: 'agree',
                    },
                    {
                        id: 'agree strongly',
                        value: 'stronglyAgree',
                    },
                ]}
                innerPadding={9}
                axisTop={null}
                axisRight={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: '',
                    legendOffset: 0,
                }}
                axisBottom={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'participation',
                    legendOffset: 36,
                    legendPosition: 'middle',
                }}
                axisLeft={{
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                    legend: 'opinions',
                    legendOffset: -40,
                    legendPosition: 'middle',
                }}
                margin={{ top: 40, right: 80, bottom: 100, left: 80 }}
                colors={{ scheme: 'spectral' }}
                borderWidth={1}
                borderColor={{
                    from: 'color',
                    modifiers: [['darker', 0.2]],
                }}
                defs={[
                    {
                        id: 'lines',
                        type: 'patternLines',
                        background: 'rgba(0, 0, 0, 0)',
                        color: 'inherit',
                        rotation: -45,
                        lineWidth: 4,
                        spacing: 8,
                    },
                ]}
                fill={[
                    {
                        match: {
                            id: 'agree strongly',
                        },
                        id: 'lines',
                    },
                    {
                        match: {
                            id: 'disagree strongly',
                        },
                        id: 'lines',
                    },
                ]}
                legends={[
                    {
                        anchor: 'bottom',
                        direction: 'row',
                        justify: false,
                        translateX: 0,
                        translateY: 80,
                        itemsSpacing: 0,
                        itemWidth: 140,
                        itemHeight: 18,
                        itemTextColor: '#999',
                        itemDirection: 'right-to-left',
                        itemOpacity: 1,
                        symbolSize: 18,
                        symbolShape: 'square',
                        effects: [
                            {
                                on: 'hover',
                                style: {
                                    itemTextColor: '#000',
                                },
                            },
                        ],
                    },
                ]}
            />
        </div>
    ),
    cover,
    isSnippet: true,
});