import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useCallback, useState } from "storybook/preview-api";
import DropdownChecks from '@molecules/DropdownChecks/DropdownChecks';
import { DropdownsCheckProps } from '@molecules/DropdownChecks/DropdownChecks';
import { variants } from '@/constants';

export default {
  title: 'molecules/Dropdowns/Checkboxes',
  component: DropdownChecks,
  argTypes: {
    variant: {
      options: Object.values(variants),
      control: {type: 'select'},
    }
  },
} as Meta<typeof DropdownChecks>;

const data = [
  {
    id: '1',
    name: 'item 1',
    href: '#'
  },
  {
    id: '2',
    name: 'item 2',
    href: '#'
  },
  {
    id: '3',
    name: 'item 3'
  },
  {
    id: '4',
    name: 'item 4'
  },
  {
    id: '5',
    name: 'item 5',
    disabled: true
  },
];

const Template: StoryFn<DropdownsCheckProps> = ({value, onChange, ...args}) => {
  const [_, updateArgs] = useArgs();
  const [internalValue, setInternalValue] = useState(value ?? []);

  const handleChange = useCallback((newValue: string[]) => {
    updateArgs({value: newValue});
    setInternalValue(newValue);
  }, []);

  return <React.Fragment>
    <DropdownChecks {...args} value={internalValue} onChange={handleChange} />
    <div>{JSON.stringify(internalValue, undefined, 2)}</div>
  </React.Fragment>
};

export const _DropdownChecks = Template.bind({});
_DropdownChecks.args = {
  data,
  value: ['1', '2'],
  multiple: true,
};

export const _DropdownChecksGroups = Template.bind({});
_DropdownChecksGroups.args = {
  data,
  value: [],
  groups: {"Group 1": ["1", "2", "3"], "Group 2": ["4", "5"]}
};