import CTable from "../components/CTable/CTable.vue";
// import draggable from "vuedraggable";
import "./utils.css";

export default {
  title: "CTable",
  component: CTable,
  // subcomponents: { draggable },
  argTypes: {
    cols: { type: Array },
    rows: { type: Array },
    pagination: Boolean,
    sorting: Boolean,
    searching: Boolean,
    enableSelection: Boolean,
    initialSortField: { type: Object },
    customizeColumn: Boolean,
    tableActions: Boolean,
    selectOnCheckBoxClickOnly: Boolean,
    showNewShowHideColumnButton: Boolean,
    disableDownloadButton: Boolean,
    showTableActionsTooltip: Boolean,
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CTable },
  template:
    '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
});

export const Default = Template.bind({});
Default.args = {
  cols: [
    { label: "", field: "drag", hidden: false },
    {
      label: "Payment mode",
      field: "mode",
      hidden: false,
      hasIcon: true,
      showToolTipText: false,
      tooltipText:
        "Count of students marked present, absent billable and removed billable",
      toolTipBoxClass: "-left-80 -ml-2",
    },
    {
      label: "",
      field: "menuOptions",
      hidden: false,
      customizeColumn: true,
      width: "60px",
    },
  ],
  showHideColumnList: [
    {
      label: "View columns",
      field: "drag",
      hidden: false,
      isRowHeaderCol: true,
    },
    { label: "", field: "drag", hidden: false },
    {
      label: "Mode",
      field: "mode",
      hidden: false,
      sortable: true,
    },
    {
      label: "",
      field: "drag",
      hidden: false,
      isActionColumn: true,
      customClasses: "border-t py-1 mt-1 border-gray-200",
      showActionIcon: true,
      icon: {
        name: "arrow-down-tray-solid-v2",
        type: "solid",
        class: "h-5 w-5 mr-2 text-gray-400",
        viewBox: "0 0 24 24",
      },
      label: "Download",
    },
  ],
  rows: [
    {
      id: 5,
      mode: "ATM Machine 1",
      sort_order: 2,
      status: 2,
      rcInstitutionID: 82,
      created_at: "2020-09-02T12:53:09.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 11,
      mode: "QA 1",
      sort_order: 3,
      status: 2,
      rcInstitutionID: 82,
      created_at: "2020-09-04T09:57:47.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 7,
      mode: "ATM Machine 2",
      sort_order: 4,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-09-04T09:45:47.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 18,
      mode: "QA 3",
      sort_order: 8,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-09-04T10:05:15.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 12,
      mode: "QA 2",
      sort_order: 21,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-09-04T09:57:55.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 15,
      mode: "QA 4",
      sort_order: 22,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-09-04T10:00:23.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 162,
      mode: "Yes bank",
      sort_order: 62,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-11-18T09:22:43.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 163,
      mode: "SBI bank",
      sort_order: 63,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-11-18T09:33:17.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 164,
      mode: "BOB bank",
      sort_order: 64,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-11-18T09:35:12.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
    {
      id: 165,
      mode: "PNB bank",
      sort_order: 65,
      status: 1,
      rcInstitutionID: 82,
      created_at: "2020-11-18T09:55:16.000000Z",
      updated_at: "2021-11-25T13:13:56.000000Z",
    },
  ],
  pagination: true,
  sorting: false,
  searching: true,
  enableSelection: true,
  tableActions: true,
  initialSortField: { field: "modal", type: "asc" },
  paginationData: { totalRecords: 200, currentPage: 13, lastPage: 20 },
  isLoading: false,
  hideCols(val, name) {
    var getColumns = Default.args.cols;
    var selectedCol = getColumns.find((col) => col.field == name);
    selectedCol.hidden = !val;
  },
  showCheckbox(value) {
    if (value == true) {
      Default.args.cols[0].hidden = 0;
    } else {
      Default.args.cols[0].hidden = true;
    }
  },
  handleReorder(val) {
    Default.args.rows = val;
    val.forEach((item) => {
      console.log(item);
    });
  },
};
