import React from 'react';
import Grid from '@digigov/ui/layouts/Grid';
import doc from './doc.mdx?raw';

export default {
  title: 'Digigov UI/layouts/Grid',
  component: Grid,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Grid',
};

export const WithControls = {
  render: (args) => {
    return (
      <Grid
        role="grid"
        aria-label="grid-example"
        container
        spacing={args.spacing}
        inline={args.inline}
      >
        <Grid
          role="row"
          xs={args.xs}
          sm={args.sm}
          md={args.md}
          lg={args.lg}
          xl={args.xl}
        >
          grid item no.1
        </Grid>
        <Grid
          role="row"
          xs={args.xs}
          sm={args.sm}
          md={args.md}
          lg={args.lg}
          xl={args.xl}
        >
          grid item no.2
        </Grid>
        <Grid
          role="row"
          xs={args.xs}
          sm={args.sm}
          md={args.md}
          lg={args.lg}
          xl={args.xl}
        >
          grid item no.3
        </Grid>
        <Grid
          role="row"
          xs={args.xs}
          sm={args.sm}
          md={args.md}
          lg={args.lg}
          xl={args.xl}
        >
          grid item no.4
        </Grid>
        <Grid
          role="row"
          xs={args.xs}
          sm={args.sm}
          md={args.md}
          lg={args.lg}
          xl={args.xl}
        >
          grid item no.5
        </Grid>
        <Grid
          role="row"
          xs={args.xs}
          sm={args.sm}
          md={args.md}
          lg={args.lg}
          xl={args.xl}
        >
          grid item no.6
        </Grid>
      </Grid>
    );
  },
  args: {
    inline: false,
    spacing: 4,
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    xl: 2,
  },
  argsTypes: {
    inline: {
      control: 'boolean',
    },
    spacing: {
      control: {
        type: 'select',
      },
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    xs: {
      control: {
        type: 'select',
      },
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    sm: {
      control: {
        type: 'select',
      },
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    md: {
      control: {
        type: 'select',
      },
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    lg: {
      control: {
        type: 'select',
      },
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    xl: {
      control: {
        type: 'select',
      },
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
  },
  parameters: {
    controls: { exclude: ['ref'] },
  },
};

export { Default } from '@digigov/ui/layouts/Grid/__stories__/Default';
export { ResponsiveSpacing } from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
export { Inline } from '@digigov/ui/layouts/Grid/__stories__/Inline';