import React, { useState } from "react";
import { SelectPicker } from "../../components/Common";

export default {
  title: "Common/Select Picker ",
  component: SelectPicker,
  parameters: { actions: { argTypesRegex: "^on.*" } },
};

const Template = (args) => {
  const [valueGroups, setValueGroups] = useState({
    timeFrame: "d",
  });

  const onChange = (name, value) => {
    setValueGroups((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  return (
    <SelectPicker {...args} valueGroups={valueGroups} onChange={onChange} />
  );
};

export const Default = Template.bind({});
Default.args = {
  optionGroups: {
    timeFrame: [
      { value: "d", label: "Daily" },
      { value: "w", label: "Week" },
      { value: "m", label: "Month" },
      { value: "qtd", label: "QTD" },
      { value: "ytd", label: "YTD" },
      { value: "y", label: "Year" },
    ],
  },
  color: "#000000",
};