import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Button }  from '../src';
import { primaryColor } from '../src/config';
import { SketchPicker } from 'react-color';
import { withKnobs, text } from "@storybook/addon-knobs";

export default {
  title: 'Button',
  component: Button,
  decorators: [withKnobs]
};

export const All = () => {
  const [ color, setColor ] = useState(primaryColor);
  const [ txtColor, setTxtColor ] = useState("white");
  const getColor = (r : number, g : number, b : number) => `rgb(${r},${g}, ${b})`;
  const getInvertColor = (r : number, g : number, b : number) => `rgb(${255 - r},${255 - g}, ${255 - b})`;

  const handleColorChange = ( color : any)=>{
      const { r, g, b } = color.rgb;
      setColor(getColor(r,g,b));
      setTxtColor(r + g + b > 630? "black" : "white");
  }

  const props = {
    onClick: action('clicked'),
    primaryColor: color,
    color: txtColor
  }
return(
<div>
  <Button {...props}>{text("Label", "Primary")}</Button>
  <Button shadow {...props}>Shadow</Button>
  <Button disabled {...props}>Disabled</Button>
  <Button rounded {...props}>Round</Button>
  <Button invert {...props}>Inverted</Button>
  <Button bg="red" invert onClick={action('clicked')}>Custom</Button>
  <Button loading {...props}>Loading</Button>

  <div style={{position: "absolute", bottom: 0, right: 0, padding: "2em"}}>
    <SketchPicker
          color={color}
          onChangeComplete={handleColorChange}
        />
  </div>
</div>)
};

export const PrimaryButton = () => 
<Button onClick={action('clicked')}>Primary</Button>;

export const ShadowButton = () => 
<Button shadow onClick={action('clicked')}>Shadow</Button>;

export const DisabledButton = () => 
<Button disabled onClick={action('clicked')}>Disabled</Button>;

export const RoundButton = () => 
<Button rounded onClick={action('clicked')}>Round</Button>;

export const InvertedButton = () => 
<Button invert onClick={action('clicked')}>Inverted</Button>;

export const CustomButton = () => 
<Button bg="red" invert onClick={action('clicked')}>Custom</Button>;

export const LoadingButton = () => 
<Button loading onClick={action('clicked')}>Loading</Button>;