import React from 'react';
import { Meta, Story } from '@storybook/react';
import { MoleculeSelect, ISelectProps } from 'react/molecules/Select';
import { theme } from 'data/dataMx';

const meta: Meta = {
  title: 'React/molecules/Select',
  component: MoleculeSelect,
  argTypes: {
    labelColor: {
      control: {
        type: 'select',
      },
      options: Object.keys(theme),
    },
    helperTextColor: {
      control: {
        type: 'select',
      },
      options: Object.keys(theme),
    },
    onChange: {
      table: {
        disable: true,
      },
    },
    name: {
      table: {
        disable: true,
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateSelect: Story<ISelectProps> = (props) => {
  return <MoleculeSelect {...props} />;
};

export const Select = TemplateSelect.bind({});

Select.args = {
  items: ['1', '2', '3'],
  label: 'Label',
  labelColor: 'neutral700',
  value: '-',
  helperText: 'Helper text',
  helperTextColor: 'neutral600',
  disabled: false,
};
