import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Button } from "./Button";
import { ArrowUpIcon, Center } from "native-base";
// import {Text} from "native-base"

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "App/Forms/Button",
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    colorScheme: { control: "color" },
    size: { control: "select", options: ["xs", "sm", "md", "lg"] },
    onPress: { action: "clicked" }
  },
} as ComponentMeta<typeof Button>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = (args) => (
  <Center flex={1}>
    <Button {...args}></Button>
  </Center>
);

export const Primary = Template.bind({ });
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
  colorScheme: "primary",
  children: "Primary"
};

export const Secondary = Template.bind({ });
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Secondary.args = {
  colorScheme: "secondary",
  children: "Secondary",
  backgroundColor: "secondary.900"
};

export const Tertiary = Template.bind({ });
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Tertiary.args = {
  colorScheme: "tertiary",
  children: "Tertiary"
};

export const Outline = Template.bind({});
Outline.args = {
  variant: 'outline',
  children: "Outline"
};

export const Disabled = Template.bind({});
Disabled.args = {
  isDisabled: true,
  children: "Disabled"
};

export const Loading = Template.bind({});
Loading.args = {
  isLoading: true,
  children: "Loading"
};

export const WithIcon = Template.bind({});
WithIcon.args = {
  leftIcon: <ArrowUpIcon size="sm" />,
  children: "Button with icon"
};