import {ComponentMeta, ComponentStory} from "@storybook/react";
import {Switch} from './Switch';

export default {
  title: "App/Forms/Switch",
  component: Switch,
  argTypes: {
    colorScheme: {
      control: {
        type: "select",
        options: ['primary', 'secondary', 'red', 'emerald', 'red']
      }, defaultValue: 'red'
    },
    size: {
      control: {
        type: "select",
        options: ['sm', 'md', 'lg', 'xl']
      }
    },
    offTrackColor: {
      control: {
        type: "select",
        options: ['primary.200', 'red.200', 'emerald.200', 'indigo.100']
      }, 
      description: "Color of background when off",
      defaultValue: 'primary.100'

    },
    onTrackColor: {
      control: {
        type: "select",
        options: ['primary.400', 'red.400', 'emerald.400', 'indigo.400']
      }, 
      description: "Color of background when on",
      defaultValue: 'rose.100'

    },
    offThumbColor: {
      control: {
        type: "select",
        options: ['primary.700', 'red.700', 'emerald.700', 'indigo.700']
      }, description: "Color of Circle when off",
      defaultValue: 'indigo.900'
    }
  }
} as ComponentMeta<typeof Switch>;

const Template: ComponentStory<typeof Switch> = (args) => {
  return (
    <Switch {...args} style={{ transform: [{ scaleX: 1 }, { scaleY: 1 }] }} />
  )
}

export const Primary = Template.bind({});

Primary.args = {
  size: 'lg'
}