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

export default {
  title: "CGroupedSelect",
  component: CGroupedSelect,
  argTypes: {
    options: Array,
    label: String,
  },
};

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

export const Default = Template.bind({});

Default.args = {
  options: [
    {
      id: 0,
      label: "fees",
      options: [
        {
          id: 11751,
          label: "Activity - Cricket - Flat Rate",
          labelExtra: "Something",
          description: "This is processed by the backend",
        },
        {
          id: 13344,
          label: "Cricket Kit",
          image_url:
            "https://reportcard-resources.s3.ap-southeast-1.amazonaws.com/POc7EUzb1KW4jeR4TLlwr7yJnLb1FgEk206EyHug.jpg",
        },
        {
          id: 13407,
          label: "Sports - Cricket - 60 mins",
          labelExtra: "Football - extra - 15mins",
          description:
            "This is processed by the backend This is processed by the backend This is processed by the backend This is processed by the backend",
          image_url:
            "https://reportcard-resources.s3.ap-southeast-1.amazonaws.com/POc7EUzb1KW4jeR4TLlwr7yJnLb1FgEk206EyHug.jpg",
          price: 1234,
        },
        {
          id: 15370,
          label: "Sports - Cricket - 60 mins",
        },
      ],
    },
    {
      id: 1,
      label: "packages",
      options: [
        {
          id: 15664,
          label: "Sports Cricket 4 Sessions",
        },
        {
          id: 15663,
          label: "Sports - Cricket 6 Sessions",
        },
      ],
    },
    {
      id: 3,
      label: "Students",
      options: [
        {
          id: 16001,
          label: "John Doe",
          description: "john.doe@example.com",
          image_url: 'https://plus.unsplash.com/premium_photo-1682089877310-b2308b0dc719?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dXNlciUyMHByb2ZpbGUlMjBwaWN0dXJlfGVufDB8fDB8fHww',
          type: "user",
          initials: "JD",
          isDisabled: true
        },
        {
          id: 16002,
          label: "Jane Smith",
          description: "jane.smith@example.com",
          image_url: null,
          type: "user",
          initials: "JS",
          isDisabled: false
        },
      ],
    },
    {
      id: 2,
      label: "others",
      options: [],
    },
  ],
  value: {
    id: 11751,
    label: "Activity - Cricket - Flat Rate",
  },
};
