import React from 'react';
import doc from './doc.mdx?raw';
import {
  SelectContainer,
  SelectOption,
} from '@digigov/ui/form/SelectContainer';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer } from '@digigov/ui/form/LabelContainer';
import { Hint } from '@digigov/ui/typography';
import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';

export default {
  title: 'Digigov UI/form/SelectContainer',
  description:
    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',
  link: 'https://guide.services.gov.gr/docs/components/select',
  component: SelectContainer,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'SelectContainer',
};

export const WithControls = {
  render: (args) => {
    return (
      <FieldContainer error={args.error}>
        <LabelContainer>
          {args.label}
          {args.hint && <Hint id={args.hintId}>{args.hintMessage}</Hint>}
          {args.error && (
            <ErrorMessage id={args.errorId}>{args.errorMessage}</ErrorMessage>
          )}
          <SelectContainer
            dense={args.dense}
            name={args.selectName}
            aria-label={args.ariaLabel}
          >
            {args.options.map((option) => (
              <SelectOption key={option.value} value={option.value}>
                {option.label}
              </SelectOption>
            ))}
          </SelectContainer>
        </LabelContainer>
      </FieldContainer>
    );
  },
  args: {
    label: 'Ταξινόμηση',
    selectName: 'select-list',
    ariaLabel: 'ταξινόμηση',
    hint: false,
    hintMessage: 'Επιλέξτε τον τρόπο που θα ταξινομηθούν τα αποτελέσματα',
    hintId: 'hintId',
    error: false,
    errorMessage: 'Πρέπει να επιλέξετε μία επιλογή',
    errorId: 'errorId',
    dense: false,
    options: [
      { label: 'Δημοφιλή', value: 'popular' },
      { label: 'Πρόσφατα', value: 'recent' },
      { label: 'Περισσότερες προβολές', value: 'views' },
      { label: 'Περισσότερα σχόλια', value: 'comments' },
    ],
  },
  argTypes: {
    label: {
      control: { type: 'text' },
    },
    selectName: {
      control: { type: 'text' },
    },
    ariaLabel: {
      control: { type: 'text' },
    },
    hint: {
      control: { type: 'boolean' },
    },
    hintMessage: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: true },
    },
    hintId: {
      control: { type: 'text' },
      if: { arg: 'hint', eq: true },
    },
    error: {
      control: { type: 'boolean' },
    },
    errorMessage: {
      control: { type: 'text' },
      if: { arg: 'error', eq: true },
    },
    errorId: {
      control: { type: 'text' },
      if: { arg: 'error', eq: true },
    },
    dense: {
      control: { type: 'boolean' },
    },
    options: {
      control: { type: 'object' },
    },
  },
};

export { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';
export { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
export { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
export { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';