import Builder, { toProps } from "../../utils/builder";
import { toCamelCase } from "../../utils/helpers";
const dialogTypes = [
    'success',
    'danger',
    'confirm',
    'exception',
    'error',
    'invalid',
    'missing',
    'payment',
    'unknown',
    'failure',
    'no-result',
    'forbidden',
];
export default {
    title: 'Components/Dialog',
};
const Template = new Builder(args => `<x-dialog ${toProps(args)} onClose="action('close')" />`);
export const Simple = Template.args({
    type: "default",
    message: "This is a example of text or description",
    header: "This is a title"
}).build();
export const Success = Template.args({
    type: "success",
    message: "Gracias por su compra",
    header: "Cobro pagado",
}).build();
export const Danger = Template.args({
    type: "danger",
    message: "Tarjeta no valida",
    header: "Pago no procesado",
}).build();
export const Confirm = Template.args({
    type: "confirm",
    message: "Tarjeta no valida",
    header: "Desea cancelar la orden?",
}).build();
export const Exception = Template.args({
    type: "exception",
    message: "Tarjeta no valida",
    header: "Pago no procesado",
}).build();
export const Error = Template.args({
    type: "error",
    message: "Tarjeta no valida",
    header: "Pago no procesado",
}).build();
export const Invalid = Template.args({
    type: "invalid",
    message: "Tarjeta no valida",
    header: "Pago no procesado",
}).build();
export const Missing = Template.args({
    type: "missing",
    message: "Pongase en contacto con IT",
    header: "No encontrado",
}).build();
export const Payment = Template.args({
    type: "payment",
    message: "No pagado",
    header: "Ocurrio un error",
}).build();
export const Unknown = Template.args({
    type: "unknown",
    message: "No sabemos que paso",
    header: "Desconocido",
}).build();
export const Failure = Template.args({
    type: "failure",
    message: "No se proceso el pago",
    header: "Pago incompleto",
}).build();
export const NoResult = Template.args({
    type: "no-result",
    message: "No se encontro",
    header: "Resultado incompleto",
}).build();
export const Forbidden = Template.args({
    type: "forbidden",
    message: "No se proceso el pago",
    header: "Pago incompleto",
}).build();
export const WithInterval = Template.args({
    type: "payment",
    message: "No se proceso el pago",
    header: "Pago incompleto",
    interval: "2",
}).build();
export const ModalService = Template.args({
    message: "This is a example of text or description",
}).build((args) => `<div class="buttons-group">
	<x-button color="primary" class="d-inline-block mb-2 mr-3" onclick="dialog('${args.message}').then((r) => action(r))">Show default</x-button>
	${dialogTypes.map(type => `<x-button color="primary" class="d-inline-block mb-2 mr-3" onclick="dialog.${toCamelCase(type)}({
		header: '${type.charAt(0).toUpperCase() + type.slice(1)}',
		message: '${args.message}',
	}).then((r) => action(r))">Show ${type}</x-button>`).join('')}
</div>`);
