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

export default {
  title: "CBasicTable",
  component: CBasicTable,
  argTypes: {
    columnData: { control: { type: "object" } },
    rowRecords: { type: Array },
    enableSelection: Boolean,
  },
};

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

export const Default = Template.bind({});
Default.args = {
  enableSelection: true,
  selectedRow: false,
  disabledRow: true,
  columnData: ["Name", "Amount", "Title", "Role", "", "", "", ""],
  rowRecords: [
    [
      { isSelected: { value: true } },
      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$200000", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Technician" },
      },
      // {
      //   secondary: { label: "jane.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Edit" },
      },
      {
        switch: { value: true },
      },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
    ],
    [
      { isSelected: { value: true } },
      { record: { value: "Arthur Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$563210", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Officer" },
      },
      // {
      //   secondary: { label: "arthur.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Omit" },
      },
      {
        switch: {},
      },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
      // {
      //   selectpicker: {
      //     placeholder: "Select country",
      //     dropdownClass: "w-full",
      //     options: [{ option: "one" }, { option: "two" }],
      //   },
      // },
      // {
      //   stackedList: {
      //     items: [
      //       {
      //         image:
      //           "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80",
      //         heading: "Maths-Level1",
      //         description: "calvin.hawkins@example.com",
      //         size: "medium",
      //         rounded: false,
      //         tag: false,
      //         collapse: false,
      //         listIcon: true,
      //       },
      //     ],
      //   },
      // },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
    ],
    [
      { isSelected: { value: true } },
      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$200000", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Technician" },
      },
      // {
      //   secondary: { label: "jane.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Edit" },
      },
      {
        switch: { value: true },
      },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
    ],
    [
      { isSelected: { value: true } },
      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$200000", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Technician" },
      },
      // {
      //   secondary: { label: "jane.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Edit" },
      },
      {
        switch: { value: true },
      },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
    ],
    [
      { isSelected: { value: true } },
      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$200000", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Technician" },
      },
      // {
      //   secondary: { label: "jane.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Edit" },
      },
      {
        switch: { value: true },
      },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
    ],
    [
      { isSelected: { value: true } },
      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$200000", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Technician" },
      },
      // {
      //   secondary: { label: "jane.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Edit" },
      },
      {
        switch: { value: true },
      },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
    ],
    [
      { isSelected: { value: true } },
      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$200000", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Technician" },
      },
      // {
      //   secondary: { label: "jane.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Edit" },
      },
      {
        switch: { value: true },
      },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
    ],
    [
      { isSelected: { value: true } },
      { record: { value: "Jane Cooper", description: "huewhfuewhfehf" } },
      { record: { value: "$200000", description: "huewhfuewhfehf" } },
      {
        linkLabel: { label: "Regional Paradigm Technician" },
      },
      // {
      //   secondary: { label: "jane.cooper@example.com" },
      // },
      {
        icon: { name: "download", type: "outline", class: "h-5 w-5" },
      },
      {
        tag: { color: "red", label: "Edit" },
      },
      {
        switch: { value: true },
      },
      // {
      //   colorText: { value: "Sessions", class: "text-red-600" },
      // },
      {
        avatar: {
          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",
          size: "small",
          rounded: true,
          name: "Alkama",
          description: "Online Booking",
        },
      },
    ],
  ],
};
