module MessageApis::UiCatalog
  class Presenter
    # Initialize flow webhook URL
    # Sent when an app has been inserted into a conversation, message or
    # the home screen, so that you can render the app.
    def self.initialize_hook(kind:, ctx:)
      type_value = ctx.dig(:values, :type)

      if type_value === "content"
        return {
          # ctx: ctx,
          definitions: [
            {
              type: "content",
              content_url: "/internal/ui_catalog"
            }
          ]
        }
      end

      definitions = [
        {
          name: "bubu",
          label: "this is from initialize",
          type: "button",
          action: {
            type: "submit"
          }
        }
      ]

      {
        # kind: kind,
        # ctx: ctx,
        definitions: definitions
      }
    end

    # Submit flow webhook URL
    # Sent when an end-user interacts with your app, via a button,
    # link, or text input. This flow can occur multiple times as an
    # end-user interacts with your app.
    def self.submit_hook(kind:, ctx:)
      { content: { kind: kind, ctx: ctx } }

      definitions = [
        {
          type: "text",
          text: "yes!!!!!",
          style: "header"
        },
        {
          type: "text",
          text: "This is paragraph text. Here's a [link](https://dev.chaskiq.io/). Here's some *bold text*. Lorem ipsum.",
          style: "paragraph"
        }
      ]

      {
        # kind: kind,
        # ctx: ctx,
        definitions: definitions
      }
    end

    # Configure flow webhook URL (optional)
    # Sent when a teammate wants to use your app, so that you can show
    # them configuration options before it’s inserted. Leaving this option
    # blank will skip configuration.
    def self.configure_hook(kind:, ctx:)
      definitions = [

        {
          id: "aaokokaaaaaa",
          name: "bubu",
          label: "fuckya",
          type: "button",
          action: {
            type: "submit"
          },
          grid: { xs: "w-full", sm: "w-full" }
        },

        {
          id: "aaaaaaaa",
          name: "aaaa",
          label: "a real submit for ya",
          type: "button",
          action: {
            type: "submit"
          },
          grid: { xs: "w-full", sm: "w-full" }
        },

        {
          id: "content-url",
          name: "content-url",
          label: "content-url",
          type: "button",
          action: {
            type: "submit"
          }
        },

        {
          id: "sd",
          name: "alooo",
          label: "a link",
          action: {},
          type: "button",
          grid: { xs: "w-full", sm: "w-full" }
        },
        {
          name: "a",
          label: "a separator",
          action: {},
          type: "separator",
          grid: { xs: "w-full", sm: "w-full" }
        }
      ]

      if ctx.dig(:field, :action, :type) === "submit"
        if ctx.dig(:field, :id) == "aaaaaaaa"
          results = {
            foo: "bar",
            baz: "baaz"
          }

          return {
            kind: "initialize",
            # ctx: ctx,
            definitions: definitions,
            results: results
          }
        end

        if ctx.dig(:field, :id) == "content-url"
          results = {
            url: "/ppupu",
            type: "content"
          }

          return {
            kind: "initialize",
            definitions: [],
            results: results
          }
        end

        if ctx.dig(:field, :name) == "bubu"
          definitions = [
            {
              name: "api_secret",
              type: "string",
              grid: { xs: "w-full", sm: "w-full" },
              errors: { api_secret: ["what hahah"] },
              value: "enter sandsman"
            },
            {
              name: "popis",
              label: "pipopo",
              type: "button",
              action: {
                type: "submit"
              },
              grid: { xs: "w-full", sm: "w-full" }
            },
            {
              type: "list",
              disabled: false,
              items: [
                {
                  type: "item",
                  id: "list-item-1",
                  title: "Item 1",
                  action: {
                    type: "submit"
                  }
                },
                {
                  type: "item",
                  id: "list-item-4",
                  title: "Item 4",
                  subtitle: "With Action",
                  action: {
                    type: "submit"
                  }
                },
                {
                  type: "item",
                  id: "list-item-2",
                  title: "Item 2",
                  subtitle: "Show Text areas",
                  tertiary_text: "With Tertiary Text",
                  action: {
                    type: "submit"
                  }
                },
                {
                  type: "item",
                  id: "list-item-6",
                  title: "Item 6",
                  subtitle: "Show dropdowns",
                  tertiary_text: "With Tertiary Text",
                  action: {
                    type: "submit"
                  }
                },
                {
                  type: "item",
                  id: "list-item-7",
                  title: "Item 7",
                  subtitle: "Checkboxes",
                  tertiary_text: "With Tertiary Text",
                  action: {
                    type: "submit"
                  }
                },
                {
                  type: "item",
                  id: "list-item-8",
                  title: "Item 8",
                  subtitle: "Inputs",
                  tertiary_text: "With inputut pupx",
                  action: {
                    type: "submit"
                  }
                }
              ]
            }
          ]
        end

        if ctx.dig(:field, :type) == "item" && ctx.dig(:field, :id) == "list-item-1"
          definitions = [
            {
              type: "text",
              text: "This is a header",
              style: "header"
            },
            {
              type: "text",
              text: "This is paragraph text. Here's a [link](https://dev.chaskiq.io/). Here's some *bold text*. Lorem ipsum.",
              style: "paragraph"
            },
            {
              type: "text",
              text: "Left aligned",
              align: "left"
            },
            {
              type: "text",
              text: "Center aligned",
              align: "center"
            },
            {
              type: "text",
              text: "Right aligned",
              align: "right"
            },

            {
              type: "data-table",
              items: [
                {
                  type: "field-value",
                  field: "Key",
                  value: "Value 1"
                },
                {
                  type: "field-value",
                  field: "Key",
                  value: "Value 2"
                },
                {
                  type: "field-value",
                  field: "Key",
                  value: "Value 3 which is a very long value that will exhibit different behaviours to the other values"
                }
              ]
            },

            {
              type: "image",
              url: "https://via.placeholder.com/150",
              height: 50,
              width: 130
            },
            {
              type: "image",
              url: "https://via.placeholder.com/150",
              height: 64,
              width: 64,
              align: "left",
              rounded: true
            },

            {
              type: "image",
              url: "https://via.placeholder.com/150",
              height: 64,
              width: 64,
              align: "center",
              rounded: true
            },

            {
              type: "image",
              url: "https://via.placeholder.com/150",
              height: 64,
              width: 64,
              align: "right",
              rounded: true
            },

            {
              type: "text",
              text: "Size as *xs* is below."
            },
            {
              type: "spacer",
              size: "xs"
            },
            {
              type: "text",
              text: "Size as *s* is below."
            },
            {
              type: "spacer",
              size: "s"
            },
            {
              type: "text",
              text: "Size as *m* is below."
            },
            {
              type: "spacer",
              size: "m"
            },
            {
              type: "text",
              text: "Size as *l* is below."
            },
            {
              type: "spacer",
              size: "l"
            },
            {
              type: "text",
              text: "Size as *xl* is below."
            },
            {
              type: "spacer",
              size: "xl"
            },
            {
              type: "text",
              text: "This is the last component."
            }

          ]
        end

        if ctx.dig(:field, :type) == "item" && ctx.dig(:field, :id) == "list-item-4"
          definitions = [
            {
              type: "single-select",
              id: "single-select-1",
              label: "Unsaved Options",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1",
                  action: {
                    type: "submit"
                  }
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "single-select",
              id: "single-select-2",
              label: "Pre-selected Option",
              value: "option-1",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1",
                  action: {
                    type: "submit"
                  }
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "single-select",
              id: "single-select-3",
              label: "Saved Options",
              save_state: "saved",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "single-select",
              id: "single-select-4",
              label: "Failed Options",
              save_state: "failed",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "single-select",
              id: "single-select-5",
              label: "Disabled Options",
              disabled: true,
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "single-select",
              id: "single-select-6",
              label: "Disabled Option",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Disabled",
                  disabled: true
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            }
          ]
        end

        if ctx.dig(:field, :type) == "item" && ctx.dig(:field, :id) == "list-item-2"
          definitions = [
            {
              type: "textarea",
              id: "textarea-1",
              label: "Normal",
              placeholder: "Enter text here..."
            },
            {
              type: "textarea",
              id: "textarea-2",
              label: "With Value",
              placeholder: "Enter text here...",
              value: "Value entered in JSON."
            },
            {
              type: "textarea",
              id: "textarea-3",
              name: "textarea-3",
              label: "Error",
              placeholder: "Enter text here...",
              value: "Value entered in JSON.",
              error: true,
              errors: { "textarea-3": ["uno error"] }
            },
            {
              type: "textarea",
              id: "textarea-4",
              label: "Disabled",
              placeholder: "Unable to enter text",
              disabled: true
            }
          ]
        end

        if ctx.dig(:field, :type) == "item" && ctx.dig(:field, :id) == "list-item-6"
          definitions = [
            {
              type: "dropdown",
              id: "dropdown-1",
              label: "Unsaved Options",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "dropdown",
              id: "dropdown-2",
              label: "Pre-selected Option",
              value: "option-1",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "dropdown",
              id: "dropdown-3",
              label: "Saved Options",
              save_state: "saved",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "dropdown",
              id: "dropdown-4",
              label: "Failed Options",
              save_state: "failed",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "dropdown",
              id: "dropdown-5",
              label: "Disabled Options",
              disabled: true,
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "dropdown",
              id: "dropdown-6",
              label: "Disabled Option",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Disabled",
                  disabled: true
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            }
          ]
        end

        if ctx.dig(:field, :type) == "item" && ctx.dig(:field, :id) == "list-item-7"
          definitions = [
            {
              type: "checkbox",
              id: "checkbox-1",
              label: "Unsaved Options",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "checkbox",
              id: "checkbox-2",
              label: "Pre-selected Option(s)",
              value: %w[option-1 option-2],
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "checkbox",
              id: "checkbox-3",
              label: "Saved Options",
              save_state: "saved",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "checkbox",
              id: "checkbox-4",
              label: "Failed Options",
              save_state: "failed",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "checkbox",
              id: "checkbox-5",
              label: "Disabled Options",
              disabled: true,
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1"
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            },
            {
              type: "checkbox",
              id: "checkbox-6",
              label: "Disabled Option",
              options: [
                {
                  type: "option",
                  id: "option-1",
                  text: "Option 1",
                  disabled: true
                },
                {
                  type: "option",
                  id: "option-2",
                  text: "Option 2"
                },
                {
                  type: "option",
                  id: "option-3",
                  text: "Option 3"
                }
              ]
            }
          ]
        end

        if ctx.dig(:field, :type) == "item" && ctx.dig(:field, :id) == "list-item-8"

          definitions = [
            {
              type: "input",
              id: "unsaved-1",
              label: "Unsaved",
              placeholder: "Enter input here...",
              save_state: "unsaved"
            },
            {
              type: "input",
              id: "unsaved-2",
              label: "Unsaved (Action)",
              placeholder: "Enter input here...",
              save_state: "unsaved",
              action: {
                type: "submit"
              }
            },
            {
              type: "input",
              id: "unsaved-3",
              label: "Unsaved (Disabled)",
              placeholder: "Enter input here...",
              save_state: "unsaved",
              disabled: true,
              action: {
                type: "submit"
              }
            },
            {
              type: "input",
              id: "failed-1",
              label: "Failed",
              placeholder: "Enter input here...",
              value: "Value is given in JSON",
              save_state: "failed"
            },
            {
              type: "input",
              id: "failed-2",
              label: "Failed (Action)",
              placeholder: "Enter input here...",
              value: "Value is given in JSON",
              save_state: "failed",
              action: {
                type: "submit"
              }
            },
            {
              type: "input",
              id: "failed-3",
              label: "Failed (Disabled)",
              placeholder: "Enter input here...",
              value: "Value is given in JSON",
              save_state: "failed",
              disabled: true,
              action: {
                type: "submit"
              }
            },
            {
              type: "input",
              id: "saved-1",
              label: "Saved",
              placeholder: "Enter input here...",
              value: "Value is given in JSON",
              save_state: "saved"
            }
          ]

        end

      end

      {
        kind: kind,
        # ctx: ctx,
        definitions: definitions
      }
    end

    def self.content_hook(kind:, ctx:)
      definitions = [
        {
          id: "ubu",
          name: "bubu",
          label: "this is from content and is dynamic #{Time.zone.now}",
          type: "button",
          action: {
            type: "submit"
          }
        }
      ]

      {
        definitions: definitions
      }
    end

    # Submit Sheet flow webhook URL (optional)
    # Sent when a sheet has been submitted. A sheet is an iframe you’ve loaded in the Messenger that is closed and submitted when the Submit Sheets JS method is called.
    def self.sheet_view(params)
      @user = params[:user]
      @name = @user[:name]
      @email = @user[:email]

      template = ERB.new <<-SHEET_VIEW
				<html lang="en">
					<head>
						<meta charset="UTF-8">
						<meta name="viewport" content="width=device-width, initial-scale=1.0">
						<meta http-equiv="X-UA-Compatible" content="ie=edge">
						<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;600;700;800;900&display=swap" rel="stylesheet">
						<title>[Chaskiq Article]</title>

						<style>
							body {
								font-family: 'Inter', sans-serif;
							}
						</style>

					</head>

					<body>
						<div class="container">
							<div id="main-page">
								Hello my friend #{@user.to_json}
							</div>
						</div>

					</body>
				</html>
      SHEET_VIEW

      template.result(binding)
    end
  end
end
