import Builder, { toProps } from "../../utils/builder";
import { MockData } from "./playground.mock";
export default {
    title: 'Components/Datatable',
    component: 'x-datatable',
    argTypes: {
        columns: { control: 'object' },
        data: { control: 'object' },
    },
    parameters: {
        mockData: MockData,
    },
};
const Template = new Builder(args => `<x-datatable ${toProps(args)}></x-datatable>`);
export const Simple = Template.args({
    fetch: 'http://datatable.test',
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Time" width="40" field="time" align="center"></x-datatable-col>
</x-datatable>`);
export const Fluid = Template.args({
    fetch: 'http://datatable.test',
    fluid: true,
    search: true,
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Time" width="40" field="time" align="center"></x-datatable-col>

	<div slot="actions">
		<x-button icon="testing" onclick="alert('Hello world')">Testing</x-button>
		<x-button color="primary" icon="print" onclick="alert('Printing...')">Print</x-button>
	</div>
</x-datatable>`);
export const Grouped = Template.args({
    fetch: 'http://datatable.test',
    groupBy: 'status',
    groupSort: 'desc',
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Time" width="40" field="time" align="center"></x-datatable-col>
</x-datatable>`);
export const WithSearch = Template.args({
    fetch: 'http://datatable.test',
    search: true,
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Time" width="40" field="time" align="center"></x-datatable-col>
</x-datatable>`);
export const WithPagination = Template.args({
    fetch: 'http://datatable.test',
    search: true,
    pagination: true,
    paginationLimit: 10
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Time" width="40" field="time" align="center"></x-datatable-col>
</x-datatable>`);
export const WithSort = Template.args({
    fetch: 'http://datatable.test',
    search: true,
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" sortable field="description"></x-datatable-col>
	<x-datatable-col label="Time" sortable width="40" field="time" align="center"></x-datatable-col>
</x-datatable>`);
export const WithFilter = Template.args({
    fetch: 'http://datatable.test',
    search: true,
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Date" field="date" type="date" align="center"></x-datatable-col>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Time" width="40" field="time" align="center"></x-datatable-col>
	<x-datatable-col label="Status" field="status" align="center"></x-datatable-col>

	<x-datatable-filter field="date" label="Date" type="date"></x-datatable-filter>
	<x-datatable-filter field="time" label="Time"></x-datatable-filter>
	<x-datatable-filter field="status" label="Status">
		<x-datatable-filter-item value="success">Success</x-datatable-filter-item>
		<x-datatable-filter-item value="pending">Pending</x-datatable-filter-item>
		<x-datatable-filter-item value="failed">Failed</x-datatable-filter-item>
	</x-datatable-filter>
</x-datatable>`);
export const WithButtons = Template.args({
    fetch: 'http://datatable.test',
    search: true,
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Time" width="40" field="time" align="center"></x-datatable-col>

	<div slot="actions">
		<x-button icon="testing" onclick="alert('Hello world')">Testing</x-button>
		<x-button color="primary" icon="print" onclick="alert('Printing...')">Print</x-button>
	</div>
</x-datatable>`);
export const WithNumericType = Template.args({
    fetch: 'http://datatable.test',
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
	<x-datatable-col label="Number" width="50" type="number" append="s" fixed="1" field="time" align="center"></x-datatable-col>
	<x-datatable-col label="Amount" width="80" type="amount" prepend="$ " fixed="1" field="amount" align="right"></x-datatable-col>
</x-datatable>`);
export const WithDatetimeType = Template.args({
    fetch: 'http://datatable.test',
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label=":calendar:" width="40" type="date" align="center" field="date"></x-datatable-col>
	<x-datatable-col label=":clock:" width="40" type="time" align="center" field="date"></x-datatable-col>
	<x-datatable-col label="Description" field="description"></x-datatable-col>
</x-datatable>`);
export const WithComponentsType = Template.args({
    fetch: 'http://datatable.test',
    search: true,
}).build(args => `<x-datatable ${toProps(args)}>
	<x-datatable-col label="Icon" width="40" type="icon" color="primary" field="icon" align="center" filled></x-datatable-col>
	<x-datatable-col label=":image:" width="40" type="image" field="avatar" align="center" fluid>
		<x-datatable-map to="description" from="name"></x-datatable-map>
		<x-datatable-map to="letters" from="name"></x-datatable-map>
	</x-datatable-col>
	<x-datatable-col label="Description" sortable description="Small description *{time}s* ago :right:" field="description"></x-datatable-col>
	<x-datatable-col label="Status" width="80" sortable type="badge" field="status" align="center">
		<x-datatable-map value="success" replace="Success"></x-datatable-map>
		<x-datatable-map value="pending" replace="Pending"></x-datatable-map>
		<x-datatable-map value="failed" replace="Failed"></x-datatable-map>

		<x-datatable-map to="color" value="success" replace="success"></x-datatable-map>
		<x-datatable-map to="color" value="pending" replace="warning"></x-datatable-map>
		<x-datatable-map to="color" value="failed" replace="danger"></x-datatable-map>

		<x-datatable-map to="description" value="success" replace="When the status is successfully"></x-datatable-map>
		<x-datatable-map to="description" value="pending" replace="The task is pending to settle"></x-datatable-map>
		<x-datatable-map to="description" value="failed" replace="A proccess with Failed status"></x-datatable-map>
	</x-datatable-col>
	<x-datatable-col label="Actions" align="center" type="template">
		<x-icon clickable name="visible" onclick="alert('View element id:{id} with data: ' + JSON.stringify(this.closest('x-datatable-cell').row, null, 2))"></x-icon>
		<x-icon clickable name="edit" onclick="alert('Edit element id:{id}')"></x-icon>
		<x-icon clickable name="trash" color="danger" onclick="alert('Delete element id:{id}');"></x-icon>
	</x-datatable-col>

	<x-datatable-filter field="date" label="Date" type="date"></x-datatable-filter>
	<x-datatable-filter field="time" label="Time"></x-datatable-filter>
	<x-datatable-filter field="status" label="Status">
		<x-datatable-filter-item value="success">Success</x-datatable-filter-item>
		<x-datatable-filter-item value="pending">Pending</x-datatable-filter-item>
		<x-datatable-filter-item value="failed">Failed</x-datatable-filter-item>
	</x-datatable-filter>
</x-datatable>`);
