import CGroupedFilterDropdown from "../components/CGroupedFilterDropdown/CGroupedFilterDropdown.vue";
import "./utils.css";

export default {
  title: "CGroupedFilterDropdown",
  component: CGroupedFilterDropdown,
  argType: {},
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CGroupedFilterDropdown },
  template: '<c-grouped-filter-dropdown v-bind="$props" />',
});

export const Default = Template.bind({});
Default.args = {
  options: [
    {
      label: "Status",
      selectedOptionCount: 0,
      options: [
        { label: "Completed", isSelected: false, value: "completed" },
        { label: "Uncompleted", isSelected: false, value: "not_completed" },
      ],
    },
    {
      label: "Assigned by",
      selectedOptionCount: 0,
      hasSearch: true,
      searchTerm: "",
      showUserAvatar: true,
      searchPlaceholder: "Search by name",
      noResultsText: "We couldn't find anyone. Try searching a different name.",
      options: [
        {
          label: "Abhishek Kapoor Staff",
          value: 478400,
          isSelected: false,
          image_240: "https://cdn.filestackcontent.com/ePlK2QcEQO6WVFuKh0W0",
          initials: "",
        },
        {
          label: "Anuj Chhabria",
          value: 84579,
          isSelected: false,
          image_240: null,
          initials: "AC",
        },
        {
          label: "anuj verify",
          value: 86939,
          isSelected: false,
          image_240: null,
          initials: "AV",
        },
        {
          label: "Ariana Grande",
          value: 266906,
          isSelected: false,
          image_240: null,
          initials: "AG",
        },

        {
          label: "New TestStaff",
          value: 478222,
          isSelected: false,
          image_240: null,
          initials: "NT",
        },
        {
          label: "New TestStaff",
          value: 478223,
          isSelected: false,
          image_240: null,
          initials: "NT",
        },
        {
          label: "New TestStaff",
          value: 478224,
          isSelected: false,
          image_240: null,
          initials: "NT",
        },
        {
          label: "Newest Staff",
          value: 167790,
          isSelected: false,
          image_240: null,
          initials: "NS",
        },
        {
          label: "Number Staff",
          value: 106135,
          isSelected: false,
          image_240: null,
          initials: "NS",
        },
        {
          label: "Numbered Staff",
          value: 106136,
          isSelected: false,
          image_240: null,
          initials: "NS",
        },
        {
          label: "Peter Parker",
          value: 293124,
          isSelected: false,
          image_240: null,
          initials: "PP",
        },
        {
          label: "Pooja Thakur",
          value: 259801,
          isSelected: false,
          image_240: null,
          initials: "PT",
        },
        {
          label: "Priyanka Sharma",
          value: 104159,
          isSelected: false,
          image_240: "https://cdn.filestackcontent.com/1iiADoLRSZesVXblBnVc",
          initials: "",
        },
      ],
    },
  ],
};
