import React from 'react';
import { LoaderContainer, CircularProgress } from '@digigov/ui/app/Loader';
import doc from './doc.mdx?raw';

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

export const WithControls = {
  render: (args) => {
    return (
      <LoaderContainer>
        <CircularProgress
          loadingText={args.loadingText}
          loadingFinishedText={args.loadingFinishedText}
          color={args.color}
          size={args.size}
        />
      </LoaderContainer>
    );
  },
  args: {
    loadingText: 'Γίνεται φόρτωση',
    loadingFinishedText: 'Η φόρτωση ολοκληρώθηκε',
    color: 'primary',
    size: 'md',
  },
  argsTypes: {
    loadingText: {
      control: 'text',
    },
    loadingFinishedText: {
      control: 'text',
    },
    color: {
      control: { type: 'select' },
      options: ['primary', 'secondary'],
    },
    size: {
      control: { type: 'select' },
      options: ['sm', 'md', 'lg'],
    },
  },
};

export { Default } from '@digigov/ui/app/Loader/__stories__/Default';
export { Secondary } from '@digigov/ui/app/Loader/__stories__/Secondary';
export { Sizes } from '@digigov/ui/app/Loader/__stories__/Sizes';
export { FullPageLoader } from '@digigov/ui/app/Loader/__stories__/FullPageLoader';
export { AccessibilityLoader } from '@digigov/ui/app/Loader/__stories__/AccessibilityLoader';