import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { action } from 'storybook/actions';
import { tableBodyDatas, tableFooterDatas, tableOptions, tableBodyDatasWithSubRow, tableOptionsSubRow, tableFooterDatasSubRow, } from './data';
import '@mozaic-ds/datatable-web-components/svelte/datatable/DataTable.svelte';
const meta = {
    title: 'DataTable/M DataTable',
    component: 'm-datatable',
    argTypes: {
        tableOptions: { control: 'object' },
        tableBodyDatas: { control: 'object' },
        tableFooterDatas: { control: 'object' },
        // Events
        'on-sort-button-click': { action: 'on-sort-button-click', table: { category: 'Events' } },
        'on-options-button-click': { action: 'on-options-button-click', table: { category: 'Events' } },
        'click-edit': { action: 'click-edit', table: { category: 'Events' } },
        'click-download': { action: 'click-download', table: { category: 'Events' } },
        'click-cell-button': { action: 'click-cell-button', table: { category: 'Events' } },
        'click-cell-link': { action: 'click-cell-link', table: { category: 'Events' } },
        'click-cell-file': { action: 'click-cell-file', table: { category: 'Events' } },
        'click-cell-input-blur': { action: 'click-cell-input-blur', table: { category: 'Events' } },
        'clear-selection': { action: 'clear-selection', table: { category: 'Events' } },
        'select-all': { action: 'select-all', table: { category: 'Events' } },
        'toggle-change': { action: 'toggle-change', table: { category: 'Events' } },
        'input-search': { action: 'input-search', table: { category: 'Events' } },
        'submit-search': { action: 'submit-search', table: { category: 'Events' } },
        'click-filter': { action: 'click-filter', table: { category: 'Events' } },
        'click-settings': { action: 'click-settings', table: { category: 'Events' } },
        'click-primary-action': { action: 'click-primary-action', table: { category: 'Events' } },
        'click-secondary-action': { action: 'click-secondary-action', table: { category: 'Events' } },
        'columns-order': { action: 'columns-order', table: { category: 'Events' } },
        'click-remove-tag': { action: 'click-remove-tag', table: { category: 'Events' } },
        'click-clear-tags': { action: 'click-clear-tags', table: { category: 'Events' } },
        'page-change': { action: 'page-change', table: { category: 'Events' } },
        'select-item': { action: 'select-item', table: { category: 'Events' } },
        'unselect-item': { action: 'unselect-item', table: { category: 'Events' } },
        'item-clicked': { action: 'item-clicked', table: { category: 'Events' } },
        'select-all-items': { action: 'select-all-items', table: { category: 'Events' } },
        'unselect-all-items': { action: 'unselect-all-items', table: { category: 'Events' } },
    },
    render: (args) => html `
    <m-datatable
      tableoptions=${ifDefined(JSON.stringify(args.tableOptions))}
      tablebodydatas=${ifDefined(JSON.stringify(args.tableBodyDatas))}
      tablefooterdatas=${ifDefined(JSON.stringify(args.tableFooterDatas))}
      @on-sort-button-click=${action('on-sort-button-click')}
      @on-options-button-click=${action('on-options-button-click')}
      @click-edit=${action('click-edit')}
      @click-download=${action('click-download')}
      @click-cell-button=${action('click-cell-button')}
      @click-cell-link=${action('click-cell-link')}
      @click-cell-file=${action('click-cell-file')}
      @click-cell-input-blur=${action('click-cell-input-blur')}
      @clear-selection=${action('clear-selection')}
      @select-all=${action('select-all')}
      @toggle-change=${action('toggle-change')}
      @input-search=${action('input-search')}
      @submit-search=${action('submit-search')}
      @click-filter=${action('click-filter')}
      @click-settings=${action('click-settings')}
      @click-primary-action=${action('click-primary-action')}
      @click-secondary-action=${action('click-secondary-action')}
      @columns-order=${action('columns-order')}
      @click-remove-tag=${action('click-remove-tag')}
      @click-clear-tags=${action('click-clear-tags')}
      @page-change=${action('page-change')}
      @select-item=${action('select-item')}
      @unselect-item=${action('unselect-item')}
      @item-clicked=${action('item-clicked')}
      @select-all-items=${action('select-all-items')}
      @unselect-all-items=${action('unselect-all-items')}
    >
      <!-- no data -->
      <div slot="no-data">
        <p>
          <strong>There is no result.</strong><br />
          Please try changing your filters.
        </p>
      </div>

      ${unsafeHTML(ifDefined(args.topbarAction))} ${unsafeHTML(ifDefined(args.topbarEdition))}
      ${unsafeHTML(ifDefined(args.topbarFilterTags))}
    </m-datatable>
  `,
};
export default meta;
export const Default = {
    args: {
        tableOptions: {
            searchPlaceholder: 'PLACEHOLDER',
            activateSettings: true,
            searchValue: 'test',
            filterLabel: 'Filter',
            hideSettingsCol: ['image', 'titles'],
        },
        tableBodyDatas,
    },
};
export const WithoutColumnHeaders = {
    args: {
        tableOptions: { showColumnHeaders: false },
        tableBodyDatas,
    },
};
export const WithItemSelection = {
    args: {
        tableOptions: {
            ...tableOptions,
            itemsSelection: true,
            optionsButton: true,
        },
        tableBodyDatas,
    },
};
export const WithSubrow = {
    args: {
        tableOptions: {
            ...tableOptionsSubRow,
            itemsSelection: true,
            activateSettings: true,
        },
        tableBodyDatas: tableBodyDatasWithSubRow,
        tableFooterDatas: tableFooterDatasSubRow,
    },
};
export const WithDefaultHeader = {
    args: {
        tableOptions: {
            ...tableOptions,
            useDefaultEdition: true,
            useDefaultAction: true,
            showTopbarEdition: true,
            filterTags: [
                { label: 'filter tag 1', id: 'filter-tag-1' },
                { label: 'filter tag 2', id: 'filter-tag-2' },
            ],
            showFooter: true,
        },
        tableBodyDatas,
        tableFooterDatas,
    },
};
export const MixedSlotWithDefault = {
    args: {
        tableOptions: {
            ...tableOptions,
            useDefaultEdition: true,
            useDefaultAction: true,
            showTopbarEdition: false,
            showFooter: true,
        },
        tableBodyDatas,
        tableFooterDatas,
        topbarAction: `
      <div slot="action" style="display:flex; gap: 8px;">
        <m-textinput placeholder="Search area" size="s"></m-textinput>
        <m-button size="s">Search</m-button>
        <m-button size="s" outlined>Filter</m-button>
      </div>
    `,
    },
};
export const WithSlots = {
    args: {
        tableOptions: { ...tableOptions, showFooter: true },
        tableBodyDatas,
        tableFooterDatas,
        topbarEdition: `
      <div slot="edition">
        <m-button size="s">Edit</m-button>
      </div>
    `,
        topbarAction: `
      <div slot="action">
        <m-button size="s">Action</m-button>
      </div>
    `,
        topbarFilterTags: `
      <div slot="filtertags">
        <m-tag label="tag 1"></m-tag>
      </div>
    `,
    },
};
export const Loading = {
    args: {
        tableOptions: {
            ...tableOptions,
            loading: true,
        },
        tableBodyDatas: {
            ...tableBodyDatas,
            bodyDatas: [],
        },
    },
};
export const WithMaxHeight = {
    args: {
        tableOptions: {
            ...tableOptions,
            heightToBeRemoved: 200,
            showFooter: true,
        },
        tableBodyDatas,
        tableFooterDatas,
    },
};
export const WithOnePageSorting = {
    args: {
        tableOptions: {
            ...tableOptions,
            useOnePageSorting: true,
        },
        tableBodyDatas,
        tableFooterDatas,
    },
};
