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

export default {
  title: "CMultiselect",
  component: CMultiselect,
  argTypes: {
    options: Array,
    label: String,
    filterable: Boolean,
    optionLabel: String,
    optionLabelSecondary: String,
    showCreateOption: Boolean,
  },
};

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

export const Default = Template.bind({});
Default.args = {
  options: [
    { id: "1426_Subject", text: "Math - Beginner - 120 mins" },
    { id: "1427_Subject", text: "Math - Intermediate - 90 mins" },
    { id: "1428_Subject", text: "Math - Advanced - 60 mins" },
    { id: "2591_Subject", text: "Math - Beginners - 15 mins" },
    { id: "15132_Subject", text: "Math - gxhghx - 15 mins" },
    { id: "15132_Subject", text: "Math - gxhghx - 30 mins" },
    { id: "15132_Subject", text: "Math - gxhghx - 35 mins" },
    { id: "15133_Subject", text: "Math - gxhghx - 15 mins" },
    { id: "15133_Subject", text: "Math - gxhghx - 30 mins" },
    { id: "15133_Subject", text: "Math - gxhghx - 35 mins" },
    {
      text: "Subjects",
      id: "1_p",
      category: "fee",
      image:
        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
      children: [
        { id: "1426_Subject", text: "Math - Beginner - 120 mins" },
        { id: "1427_Subject", text: "Math - Intermediate - 90 mins" },
        { id: "1428_Subject", text: "Math - Advanced - 60 mins" },
        { id: "2591_Subject", text: "Math - Beginners - 15 mins" },
        { id: "15132_Subject", text: "Math - gxhghx - 15 mins" },
        { id: "15132_Subject", text: "Math - gxhghx - 30 mins" },
        { id: "15132_Subject", text: "Math - gxhghx - 35 mins" },
        { id: "15133_Subject", text: "Math - gxhghx - 15 mins" },
        { id: "15133_Subject", text: "Math - gxhghx - 30 mins" },
        { id: "15133_Subject", text: "Math - gxhghx - 35 mins" },
        { id: "15134_Subject", text: "Math - gxhghx - 15 mins" },
        { id: "15134_Subject", text: "Math - gxhghx - 30 mins" },
        { id: "15134_Subject", text: "Math - gxhghx - 35 mins" },
        { id: "15137_Subject", text: "Math - check - 30 mins" },
        { id: "15137_Subject", text: "Math - check - 40 mins" },
        { id: "15138_Subject", text: "Math - check - 30 mins" },
        { id: "15138_Subject", text: "Math - check - 40 mins" },
        { id: "15141_Subject", text: "Math - bhy - 10 mins" },
        { id: "15141_Subject", text: "Math - bhy - 20 mins" },
        { id: "15142_Subject", text: "Math - bhy - 10 mins" },
        { id: "15142_Subject", text: "Math - bhy - 20 mins" },
        { id: "15143_Subject", text: "Math - now - 10 mins" },
        { id: "15143_Subject", text: "Math - now - 15 mins" },
        { id: "15144_Subject", text: "Math - now - 10 mins" },
        { id: "15144_Subject", text: "Math - now - 15 mins" },
        { id: "15189_Subject", text: "Math - M1 - 60 mins" },
        { id: "15224_Subject", text: "Math - Hey - 10 mins" },
        { id: "15224_Subject", text: "Math - Hey - 25 mins" },
        { id: "15225_Subject", text: "Math - Hey - 10 mins" },
        { id: "15225_Subject", text: "Math - Hey - 25 mins" },
        { id: "15262_Subject", text: "Math - ty - 20 mins" },
        { id: "15262_Subject", text: "Math - ty - 30 mins" },
        { id: "15263_Subject", text: "Math - ty - 20 mins" },
        { id: "15263_Subject", text: "Math - ty - 30 mins" },
        { id: "15287_Subject", text: "Math - rt12 - 20 mins" },
        { id: "15288_Subject", text: "Math - tky - 15 mins" },
        { id: "15317_Subject", text: "Math - gmt - 10 mins" },
        { id: "15317_Subject", text: "Math - gmt - 20 mins" },
        { id: "15317_Subject", text: "Math - gmt - 30 mins" },
        { id: "15317_Subject", text: "Math - gmt - 40 mins" },
        { id: "15318_Subject", text: "Math - gmt - 10 mins" },
        { id: "15318_Subject", text: "Math - gmt - 20 mins" },
        { id: "15318_Subject", text: "Math - gmt - 30 mins" },
        { id: "15318_Subject", text: "Math - gmt - 40 mins" },
        { id: "15319_Subject", text: "Math - gmt - 10 mins" },
        { id: "15319_Subject", text: "Math - gmt - 20 mins" },
        { id: "15319_Subject", text: "Math - gmt - 30 mins" },
        { id: "15319_Subject", text: "Math - gmt - 40 mins" },
        { id: "15320_Subject", text: "Math - gmt - 10 mins" },
        { id: "15320_Subject", text: "Math - gmt - 20 mins" },
        { id: "15320_Subject", text: "Math - gmt - 30 mins" },
        { id: "15320_Subject", text: "Math - gmt - 40 mins" },
        { id: "15341_Subject", text: "Math - good - 15 mins" },
        { id: "15341_Subject", text: "Math - good - 30 mins" },
        { id: "15343_Subject", text: "Math - good - 15 mins" },
        { id: "15343_Subject", text: "Math - good - 30 mins" },
      ],
    },
    {
      text: "Packages",
      id: "2_p",
      initials: "AS",
      category: "fee",
      children: [{ id: "15820_Package", text: "Mathematics" }],
      description: "Some descriptions",
    },
    {
      hasNoData: true,
    },
    {
      text: "Krishna Bekcham",
      textSecondary: "Krishna Bekcham@business",
      id: "3_p",
      initials: "AS",
      category: "fee",
      children: [{ id: "15820_Package", text: "Mathematics" }],
      details: "something@gmail.com",
      description: "Some descriptions",
      isDisabled: true,
    },
    {
      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ",
      children: [{ id: "15820_Package", text: "Mathematics" }],
      details: "something@gmail.com",
      id: "4_p",
      category: "package",
      description: "Some descriptions",
    },
    {
      text: "Icon",
      id: "5_p",
      category: "fee",
      icon: {
        name: "location-marker-outline",
        type: "outline",
      },
    },
  ],
  optionLabel: "text",
  optionLabelSecondary: "textSecondary",
  label: "Active",
  showOptionImage: false,
  filterable: false,
};
