import * as React from "react"
import { ComponentStory, ComponentMeta } from "@storybook/react"
import { Button } from "../src"
import { CloseIcon } from "../src/components/Modal/Head/CloseIcon"
import { Button as ButtonAui } from "@atomintl/aui-next"

export default {
  title: "通用/Button",
  component: Button
} as ComponentMeta<typeof Button>

// Story模版
const Template: ComponentStory<typeof Button> = args => <Button {...args}>Button</Button>

const BaseTemplate: ComponentStory<typeof Button> = args => (
  <div className="story-spacing">
    <ButtonAui color="error" variant="contained" className="h-14">
      aui-button
    </ButtonAui>
    <div style={{ margin: "40px 0" }}>
      <Button {...args} variant="contained" loading>
        实心
      </Button>
      <Button {...args} variant="contained">
        实心
      </Button>
      <Button {...args} variant="text">
        文本
      </Button>
      <Button {...args} variant="outlined">
        边框
      </Button>
    </div>

    <div style={{ margin: "40px 0" }}>
      <Button {...args} variant="contained" color="red" startIcon={<CloseIcon />}>
        实心
      </Button>

      <Button {...args} variant="text" color="red">
        文本
      </Button>
      <Button {...args} variant="outlined" color="red" endIcon={<CloseIcon />}>
        边框
      </Button>
    </div>

    <div style={{ margin: "40px 0" }}>
      <Button {...args} variant="contained" color="green">
        实心
      </Button>
      <Button {...args} variant="text" color="green">
        文本
      </Button>
      <Button {...args} variant="outlined" color="green">
        边框
      </Button>
    </div>

    <div style={{ margin: "40px 0" }}>
      <Button {...args} variant="contained" color="gray">
        实心
      </Button>

      <Button {...args} variant="text" color="gray">
        文本
      </Button>
      <Button {...args} variant="outlined" color="gray">
        边框
      </Button>
    </div>
    <h1>禁用</h1>
    <div style={{ margin: "40px 0" }}>
      <Button {...args} variant="contained" color="green" disabled>
        实心
      </Button>
      <Button {...args} variant="text" disabled>
        文本
      </Button>
      <Button {...args} variant="outlined" disabled>
        边框
      </Button>
    </div>
  </div>
)

export const Normal = Template.bind({})
export const Base = BaseTemplate.bind({})

Base.storyName = "基本用法"
Base.parameters = {
  docs: {
    description: {
      story: "Button（按钮）组件有三种形式：实心（默认值）、文本，以及描边。"
    }
  }
}