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

export default {
  title: "CSelect",
  component: CSelect,
  argTypes: {
    label: String,
    placeholder: String,
    helpText: String,
    hint: String,
    showImage: Boolean,
    addAction: Object,
    icon: Object,
    options: { control: { type: "object" } },
    type: String,
    value: String,
    dropdownClass: String,
    showCreateOption: Boolean,
  },
};

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

export const Default = Template.bind({});
Default.args = {
  label: "Name",
  placeholder: "Enter your name",
  helpText: "This information is displayed on booking page",
  hint: "Optional",
  showImage: true,
  value: null,
  renderOptionName: "code",
  options: [
    {
      code: "All values",
      value: "all_values",
      id: "all",
    },
    {
      code: "Group 1",
      value: "group_1",
      id: "group_1",
      type: "type_group",
    },
    {
      id: "0000550438",
      initials: "DB",
      photo: "https://cdn.filestackcontent.com/LP3yl3gdRJG9C0ARNFhR",
      code: "David Beckham",
      showImage: true,
      headerSwitch: true,
      headerText: "Header",
    },
    {
      code: "Krishna david beckham This information is displayed on booking page",
      value: "onee4",
      photo:
        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
      showImage: true,
      id: "s_2",
    },
    {
      code: "one2",
      value: "onee1",
      id: "s_3",
      initials: "AS",
      showImage: true,
    },
    { code: "one3", value: "onee5", id: "s_4", badge: { label: "Default", color: "gray" } },
    { code: "one4", value: "onee12", id: "s_5" },
    {
      code: "one5",
      value: "onee3425",
      photo:
        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
      showImage: true,
      id: "s_6",
    },
    {
      code: "one6",
      value: "onee67",
      photo:
        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
      showImage: true,
      id: "s_7",
    },
    { code: "one7", value: "onee78", id: "s_8", isDisabled: true },
    { code: "one8", value: "onee89", id: "s_9" },
    {
      code: "one9",
      value: "onee90",
      photo:
        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
      showImage: true,
      id: "s_10",
    },
    { code: "one0", value: "onee54", id: "s_11" },
    { code: "one34", value: "onee43", id: "s_12", isDisabled: true },
    { code: "one23", value: "onee32", id: "s_13", isDisabled: true },
    {
      code: "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. It has survived not only five centuries, but als",
      value: "onee33",
      photo:
        "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80",
      showImage: true,
      id: "s_14",
    },
    {
      code: "two",
      value: "twoo",
      isDisabled: true,
      id: "s_15",
    },
    {
      code: "Desktop",
      value: "desktop",
      id: "desktop",
      showIcon: true,
      icon: {
        name: "computer-desktop-solid-v2",
        type: "solid",
        viewBox: "0 0 24 24",
        class: "h-5 w-5 text-gray-400",
      },
    },
    {
      code: "Mobile",
      value: "mobile",
      id: "mobile",
      showIcon: true,
      icon: {
        name: "device-phone-mobile-solid-v2",
        type: "solid",
        viewBox: "0 0 24 24",
        class: "h-5 w-5 text-gray-400",
      },
    },
    { code: "Inter", value: "inter", id: "inter" },
    { code: "Bitter", value: "bitter", id: "bitter" },
    { code: "Lato", value: "lato", id: "lato" },
  ],
  addAction: {
    label: "Add new",
  },
  icon: {
    name: "bookmark",
    type: "solid",
    class: "h-5 w-5",
  },
  isDisabled: false,
  shouldShowCustomFonts: false,
};
