import * as React from "react";
import { action } from "@storybook/addon-actions";
// import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
import IconButton from "@material-ui/core/IconButton";
import MoreVertIcon from "@material-ui/icons/MoreVert";
// import SendIcon from "@material-ui/icons/Send";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";

import WidgetContainer from "./WidgetContainer";

export default {
  title: "Modules|Dashboard/Components/WidgetContainer",
  component: WidgetContainer,
  excludeStories: /.*Data$/,
};

const actions = [
  {
    id: "test",
    label: "Menu 1",
    onSelect: () => console.log("Menu 1"),
    icon: <FavoriteIcon fontSize="small" />,
  },
  {
    id: "test2",
    label: "Menu 2",
    onSelect: () => console.log("Menu 2"),
    icon: <ShareIcon fontSize="small" />,
  },
];

export const Default: any = () => (
  <div style={{ padding: 50 }}>
    <WidgetContainer title="Title of Dashboard Widget" actions={actions}>
      <span onClick={() => action("Clicked")}>This is an action!</span>
    </WidgetContainer>
  </div>
);

export const withCustomActionComponent: any = () => {
  return (
    <WidgetContainer
      title="With Custom Action Component"
      actionComponent={
        <IconButton aria-label="settings">
          <MoreVertIcon />
        </IconButton>
      }
    />
  );
};

Default.story = {
  parameters: {
    jest: ["WidgetContainer"],
  },
};