import React from 'react';
import Select, { SelectProps } from '../components/Forms/Select';
import { Story } from '@storybook/react';

export default {
  title: 'Forms / Select',
  component: Select,
};

const Template: Story<SelectProps> = (args) => (
  <div>
    <Select {...args} />
  </div>
);

export const Default = Template.bind({});
Default.args = {
  title: 'Inquiry Type',
  callback: (e: any) => {
    console.log(e.target.value);
  },
  options: [
    {
      title: 'General Inquiry',
      value: 'General Inquiry',
      selected: true,
    },
    {
      title: 'Status of Existing Order',
      value: 'Status of Existing Order',
      selected: false,
    },
    {
      title: 'Product Questions',
      value: 'Product Questions',
      selected: false,
    },
    {
      title: 'Warranty Questions',
      value: 'Warranty Questions',
      selected: false,
    },
    {
      title: 'Staff Issues',
      value: 'Staff Issues',
      selected: false,
    },
    {
      title: 'Delivery Concerns',
      value: 'Delivery Concerns',
      selected: false,
    },
    {
      title: 'Refund, Return, & Cancellation Questions',
      value: 'Refund, Return, & Cancellation Questions',
      selected: false,
    },
  ],
  labelTheme: '',
  selectTheme: '',
  theme: '',
  id: 'Inquiry Type',
  required: true,
};

export const Error = Template.bind({});
Error.args = {
  id: 'mySelect',
  title: 'Make your choice',
  error: 'Make a valid choice',
  callback: () => {
    console.log('error template');
  },
};

export const Optional = Template.bind({});
Optional.args = {
  id: 'mySelect',
  title: 'Make your choice',
  optional: true,
  callback: () => {
    console.log('optional template');
  },
};

export const DefaultValue = Template.bind({});
DefaultValue.args = {
  id: 'mySelect',
  title: 'Make your choice',
  defaultValue: '1',
  callback: () => {
    console.log('default value template');
  },
};

export const Theme = Template.bind({});
Theme.args = {
  id: 'mySelect',
  title: 'Make your choice',
  theme: 'text-3xl',
  callback: () => {
    console.log('theme template');
  },
};