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

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

export const WithControls = {
  render: (args) => {
    return (
      <Stack
        spacing={args.spacing}
        alignItems={args.alignItems}
        direction={args.direction}
        justifyContent={args.justifyContent}
        alignContent={args.alignContent}
        flexWrap={args.flexWrap}
      >
        <Card variant="border"> Item 1 </Card>
        <Card variant="border"> Item 2 </Card>
        <Card variant="border"> Item 3 </Card>
        <Card variant="border"> Item 4 </Card>
        <Card variant="border"> Item 5 </Card>
        <Card variant="border"> Item 6 </Card>
      </Stack>
    );
  },
  args: {
    spacing: 4,
    direction: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    alignContent: 'center',
    flexWrap: 'nowrap',
  },
  argsTypes: {
    spacing: {
      control: {
        type: 'select',
      },
      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    },
    direction: {
      control: {
        type: 'select',
      },
      options: ['row', 'row-reverse', 'column', 'column-reverse'],
    },
    justifyContent: {
      control: {
        type: 'select',
      },
      options: [
        'flex-start',
        'flex-end',
        'center',
        'space-between',
        'space-around',
        'space-evenly',
      ],
    },
    alignItems: {
      control: {
        type: 'select',
      },
      options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
    },
    alignContent: {
      control: {
        type: 'select',
      },
      options: [
        'stretch',
        'flex-start',
        'flex-end',
        'center',
        'space-between',
        'space-around',
      ],
    },
    flexWrap: {
      control: {
        type: 'select',
      },
      options: ['nowrap', 'wrap'],
    },
  },
  parameters: {
    controls: { exclude: ['ref'] },
  },
};

export { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
export { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
export { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
export { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
export { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
export { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';