import { test, expect } from '@playwright/test';
import { DiscoverOutput, DiscoverWorkflowOutput } from '@novu/echo';

test.describe('Step Page', () => {
  test('should preview inputs', async ({ page }) => {
    await page.route('*/**/api/echo/health', async (route) => {
      const json = { success: true, health: 'ok' };

      await route.fulfill({ json });
    });

    await page.route('*/**/api/workflows', async (route) => {
      const json: Array<DiscoverWorkflowOutput> = [
        {
          workflowId: 'workflow-id',
          options: {
            payloadSchema: {
              type: 'object',
              properties: {
                name: {
                  type: 'string',
                },
              },
            },
          },
          steps: [
            {
              stepId: 'send-email',
              type: 'email',
              inputs: {
                schema: {
                  type: 'object',
                  properties: {
                    showButton: {
                      type: 'boolean',
                      default: true,
                    },
                    username: {
                      type: 'string',
                      default: 'alanturing',
                    },
                    userImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png',
                      format: 'uri',
                    },
                    invitedByUsername: {
                      type: 'string',
                      default: 'Alan',
                    },
                    invitedByEmail: {
                      type: 'string',
                      default: 'alan.turing@example.com',
                      format: 'email',
                    },
                    teamName: {
                      type: 'string',
                      default: 'Team Tomer',
                    },
                    teamImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png',
                      format: 'uri',
                    },
                    inviteLink: {
                      type: 'string',
                      default: 'https://vercel.com/teams/invite/foo',
                      format: 'uri',
                    },
                    inviteFromIp: {
                      type: 'string',
                      default: '204.13.186.218',
                    },
                    inviteFromLocation: {
                      type: 'string',
                      default: 'São Paulo, Brazil',
                    },
                  },
                },
              },
              outputs: {
                schema: {
                  type: 'object',
                  properties: {
                    subject: {
                      type: 'string',
                    },
                    body: {
                      type: 'string',
                    },
                  },
                  required: ['subject', 'body'],
                  additionalProperties: false,
                },
              },
              results: {
                schema: {
                  type: 'object',
                  properties: {},
                  required: [],
                  additionalProperties: false,
                },
              },
              code: 'async (input)=>{\n        return {\n            subject: "Hello World " + payload.name,\n            body: (0,_react__WEBPACK_IMPORTED_MODULE_1__.renderEmail)(input)\n        };\n    }',
              options: {
                inputSchema: {
                  type: 'object',
                  properties: {
                    showButton: {
                      type: 'boolean',
                      default: true,
                    },
                    username: {
                      type: 'string',
                      default: 'alanturing',
                    },
                    userImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png',
                      format: 'uri',
                    },
                    invitedByUsername: {
                      type: 'string',
                      default: 'Alan',
                    },
                    invitedByEmail: {
                      type: 'string',
                      default: 'alan.turing@example.com',
                      format: 'email',
                    },
                    teamName: {
                      type: 'string',
                      default: 'Team Tomer',
                    },
                    teamImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png',
                      format: 'uri',
                    },
                    inviteLink: {
                      type: 'string',
                      default: 'https://vercel.com/teams/invite/foo',
                      format: 'uri',
                    },
                    inviteFromIp: {
                      type: 'string',
                      default: '204.13.186.218',
                    },
                    inviteFromLocation: {
                      type: 'string',
                      default: 'São Paulo, Brazil',
                    },
                  },
                },
              },
              providers: [],
            },
            {
              stepId: 'send-inapp',
              type: 'in_app',
              inputs: {
                schema: {
                  type: 'object',
                  properties: {},
                  required: [],
                  additionalProperties: false,
                },
              },
              outputs: {
                schema: {
                  type: 'object',
                  properties: {
                    body: {
                      type: 'string',
                    },
                  },
                  required: ['body'],
                  additionalProperties: false,
                },
              },
              results: {
                schema: {
                  type: 'object',
                  properties: {
                    seen: {
                      type: 'boolean',
                    },
                    read: {
                      type: 'boolean',
                    },
                    lastSeenDate: {
                      type: 'string',
                      format: 'date-time',
                      nullable: true,
                    },
                    lastReadDate: {
                      type: 'string',
                      format: 'date-time',
                      nullable: true,
                    },
                  },
                  required: ['seen', 'read', 'lastSeenDate', 'lastReadDate'],
                  additionalProperties: false,
                },
              },
              code: 'async (input)=>{\n        return {\n            body: "Hello In App"\n        };\n    }',
              options: {},
              providers: [],
            },
          ],
          code: 'async ({ step, payload })=>{\n    await step.email("send-email", async (input)=>{\n        return {\n            subject: "Hello World " + payload.name,\n            body: (0,_react__WEBPACK_IMPORTED_MODULE_1__.renderEmail)(input)\n        };\n    }, {\n        inputSchema: {\n            type: "object",\n            properties: {\n                showButton: {\n                    type: "boolean",\n                    default: true\n                },\n                username: {\n                    type: "string",\n                    default: "alanturing"\n                },\n                userImage: {\n                    type: "string",\n                    default: "https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png",\n                    format: "uri"\n                },\n                invitedByUsername: {\n                    type: "string",\n                    default: "Alan"\n                },\n                invitedByEmail: {\n                    type: "string",\n                    default: "alan.turing@example.com",\n                    format: "email"\n                },\n                teamName: {\n                    type: "string",\n                    default: "Team Tomer"\n                },\n                teamImage: {\n                    type: "string",\n                    default: "https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png",\n                    format: "uri"\n                },\n                inviteLink: {\n                    type: "string",\n                    default: "https://vercel.com/teams/invite/foo",\n                    format: "uri"\n                },\n                inviteFromIp: {\n                    type: "string",\n                    default: "204.13.186.218"\n                },\n                inviteFromLocation: {\n                    type: "string",\n                    default: "S\\xe3o Paulo, Brazil"\n                }\n            }\n        }\n    });\n    await step.inApp("send-inapp", async (input)=>{\n        return {\n            body: "Hello In App"\n        };\n    });\n}',
          data: {
            schema: {
              type: 'object',
              properties: {
                name: {
                  type: 'string',
                },
              },
            },
          },
          inputs: {
            schema: {
              type: 'object',
              properties: {},
              required: [],
              additionalProperties: false,
            },
          },
        },
      ];

      await route.fulfill({ json });
    });

    await page.route('*/**/api/workflows/workflow-id', async (route) => {
      await route.fulfill({
        json: {
          workflowId: 'workflow-id',
          options: {
            payloadSchema: {
              type: 'object',
              properties: {
                name: {
                  type: 'string',
                },
              },
            },
          },
          steps: [
            {
              stepId: 'send-email',
              type: 'email',
              inputs: {
                schema: {
                  type: 'object',
                  properties: {
                    showButton: {
                      type: 'boolean',
                      default: true,
                    },
                    username: {
                      type: 'string',
                      default: 'alanturing',
                    },
                    userImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png',
                      format: 'uri',
                    },
                    invitedByUsername: {
                      type: 'string',
                      default: 'Alan',
                    },
                    invitedByEmail: {
                      type: 'string',
                      default: 'alan.turing@example.com',
                      format: 'email',
                    },
                    teamName: {
                      type: 'string',
                      default: 'Team Tomer',
                    },
                    teamImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png',
                      format: 'uri',
                    },
                    inviteLink: {
                      type: 'string',
                      default: 'https://vercel.com/teams/invite/foo',
                      format: 'uri',
                    },
                    inviteFromIp: {
                      type: 'string',
                      default: '204.13.186.218',
                    },
                    inviteFromLocation: {
                      type: 'string',
                      default: 'São Paulo, Brazil',
                    },
                  },
                },
              },
              outputs: {
                schema: {
                  type: 'object',
                  properties: {
                    subject: {
                      type: 'string',
                    },
                    body: {
                      type: 'string',
                    },
                  },
                  required: ['subject', 'body'],
                  additionalProperties: false,
                },
              },
              results: {
                schema: {
                  type: 'object',
                  properties: {},
                  required: [],
                  additionalProperties: false,
                },
              },
              code: 'async (input)=>{\n        return {\n            subject: "Hello World " + payload.name,\n            body: (0,_react__WEBPACK_IMPORTED_MODULE_1__.renderEmail)(input)\n        };\n    }',
              options: {
                inputSchema: {
                  type: 'object',
                  properties: {
                    showButton: {
                      type: 'boolean',
                      default: true,
                    },
                    username: {
                      type: 'string',
                      default: 'alanturing',
                    },
                    userImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png',
                      format: 'uri',
                    },
                    invitedByUsername: {
                      type: 'string',
                      default: 'Alan',
                    },
                    invitedByEmail: {
                      type: 'string',
                      default: 'alan.turing@example.com',
                      format: 'email',
                    },
                    teamName: {
                      type: 'string',
                      default: 'Team Tomer',
                    },
                    teamImage: {
                      type: 'string',
                      default:
                        'https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png',
                      format: 'uri',
                    },
                    inviteLink: {
                      type: 'string',
                      default: 'https://vercel.com/teams/invite/foo',
                      format: 'uri',
                    },
                    inviteFromIp: {
                      type: 'string',
                      default: '204.13.186.218',
                    },
                    inviteFromLocation: {
                      type: 'string',
                      default: 'São Paulo, Brazil',
                    },
                  },
                },
              },
              providers: [],
            },
            {
              stepId: 'send-inapp',
              type: 'in_app',
              inputs: {
                schema: {
                  type: 'object',
                  properties: {},
                  required: [],
                  additionalProperties: false,
                },
              },
              outputs: {
                schema: {
                  type: 'object',
                  properties: {
                    body: {
                      type: 'string',
                    },
                  },
                  required: ['body'],
                  additionalProperties: false,
                },
              },
              results: {
                schema: {
                  type: 'object',
                  properties: {
                    seen: {
                      type: 'boolean',
                    },
                    read: {
                      type: 'boolean',
                    },
                    lastSeenDate: {
                      type: 'string',
                      format: 'date-time',
                      nullable: true,
                    },
                    lastReadDate: {
                      type: 'string',
                      format: 'date-time',
                      nullable: true,
                    },
                  },
                  required: ['seen', 'read', 'lastSeenDate', 'lastReadDate'],
                  additionalProperties: false,
                },
              },
              code: 'async (input)=>{\n        return {\n            body: "Hello In App"\n        };\n    }',
              options: {},
              providers: [],
            },
          ],
          code: 'async ({ step, payload })=>{\n    await step.email("send-email", async (input)=>{\n        return {\n            subject: "Hello World " + payload.name,\n            body: (0,_react__WEBPACK_IMPORTED_MODULE_1__.renderEmail)(input)\n        };\n    }, {\n        inputSchema: {\n            type: "object",\n            properties: {\n                showButton: {\n                    type: "boolean",\n                    default: true\n                },\n                username: {\n                    type: "string",\n                    default: "alanturing"\n                },\n                userImage: {\n                    type: "string",\n                    default: "https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png",\n                    format: "uri"\n                },\n                invitedByUsername: {\n                    type: "string",\n                    default: "Alan"\n                },\n                invitedByEmail: {\n                    type: "string",\n                    default: "alan.turing@example.com",\n                    format: "email"\n                },\n                teamName: {\n                    type: "string",\n                    default: "Team Tomer"\n                },\n                teamImage: {\n                    type: "string",\n                    default: "https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png",\n                    format: "uri"\n                },\n                inviteLink: {\n                    type: "string",\n                    default: "https://vercel.com/teams/invite/foo",\n                    format: "uri"\n                },\n                inviteFromIp: {\n                    type: "string",\n                    default: "204.13.186.218"\n                },\n                inviteFromLocation: {\n                    type: "string",\n                    default: "S\\xe3o Paulo, Brazil"\n                }\n            }\n        }\n    });\n    await step.inApp("send-inapp", async (input)=>{\n        return {\n            body: "Hello In App"\n        };\n    });\n}',
          data: {
            schema: {
              type: 'object',
              properties: {
                name: {
                  type: 'string',
                },
              },
            },
          },
          inputs: {
            schema: {
              type: 'object',
              properties: {},
              required: [],
              additionalProperties: false,
            },
          },
        },
      });
    });

    await page.route('*/**/api/workflows/workflow-id/preview/send-email', async (route) => {
      await route.fulfill({
        json: {
          outputs: {
            subject: 'Hello World Banana',
            body: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-logo.png"/><link rel="preload" as="image" href="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png"/><link rel="preload" as="image" href="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-arrow.png"/><link rel="preload" as="image" href="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/></head><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿</div></div><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:465px;border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" height="37" src="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-logo.png" style="display:block;outline:none;border:none;text-decoration:none;margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto" width="40"/></td></tr></tbody></table><h1 class="" style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Joined <strong>Team Tomer</strong> on <strong>Vercel</strong></h1><p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)">Hello alanturing,</p><p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration:none;text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Team Tomer</strong> team on <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png" style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img height="64" src="https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-team.png" style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:18" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="letter-spacing: 20px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td></td></tr></tbody></table><p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)">or copy and paste this URL into your browser: <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration:none;text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</a></p><hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px"/><p style="font-size:12px;line-height:24px;margin:16px 0;color:rgb(102,102,102)">This invitation was intended for <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> located in <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table></body></html>',
          },
          providers: {},
          metadata: {
            status: 'success',
            error: false,
            duration: 70.238541,
          },
        },
      });
    });

    await page.goto('/workflow/workflow-id/steps/send-email');
    await page.waitForRequest('*/**/api/workflows/workflow-id/preview/send-email');

    const subject = await page.getByTestId('preview-subject');
    await expect(subject).toHaveText('Hello World Banana');
  });
});
