Modals

const { Events, ModalBuilder } = require('discord.js');

client.on(Events.InteractionCreate, async (interaction) => {
	if (!interaction.isChatInputCommand()) return;

	if (interaction.commandName === 'ping') {
		const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');

		// TODO: Add components to modal...
	}
});

const { Events, LabelBuilder, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');

client.on(Events.InteractionCreate, async (interaction) => {
	if (!interaction.isChatInputCommand()) return;

	if (interaction.commandName === 'ping') {
		// Create the modal
		const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');

		// Create the Text Input components
		const favoriteColorInput = new TextInputBuilder()
			.setCustomId('favoriteColorInput')
			// Short means only a single line of text
			.setStyle(TextInputStyle.Short);

		const hobbiesInput = new TextInputBuilder()
			.setCustomId('hobbiesInput')
			// Paragraph means multiple lines of text.
			.setStyle(TextInputStyle.Paragraph)
			// Uninteractable text inside of the Text Input
			.setPlaceholder('card games, films, books, etc.');

		// Creating Labels for the Text Input components
		const favoriteColorLabel = new LabelBuilder()
			// The label is the prompt the user sees for this component
			.setLabel("What's your favorite color?")
			// Add the Text Input to the Label
			.setTextInputComponent(favoriteColorInput);

		const hobbiesLabel = new LabelBuilder()
			.setLabel("What's some of your favorite hobbies?")
			// The description is a small text under the Label and above the interactive component
			.setDescription('Activities you like to participate in')
			.setTextInputComponent(hobbiesInput);

		// Add Labels to the Modal
		modal.addLabelComponents(favoriteColorLabel, hobbiesLabel);

		// Show the modal to the user
		await interaction.showModal(modal); 
	}
});

client.on(Events.InteractionCreate, (interaction) => {
	if (!interaction.isModalSubmit()) return;
	console.log(interaction);
});

client.on(Events.InteractionCreate, async (interaction) => {
	if (!interaction.isModalSubmit()) return;
	if (interaction.customId === 'myModal') {
		await interaction.reply({ content: 'Your submission was received successfully!' });
	}
});

client.on(Events.InteractionCreate, (interaction) => {
	if (!interaction.isModalSubmit()) return;
	if (interaction.customId === 'myModal') {
		await interaction.reply({ content: 'Your submission was received successfully!' });

		// Get the data entered by the user
		const favoriteColor = interaction.fields.getTextInputValue('favoriteColorInput');
		const hobbies = interaction.fields.getTextInputValue('hobbiesInput');

		console.log({ favoriteColor, hobbies });
	}
});

const input = new TextInputBuilder()
	// set the component id (this is not the custom id)
	.setId(0)
	// Set the maximum number of characters to allowed
	.setMaxLength(1_000)
	// Set the minimum number of characters required for submission
	.setMinLength(10)
	// Set a default value to pre-fill the Text Input
	.setValue('Default')
	// Require a value in this Text Input field (defaults to true)
	.setRequired(true);

const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');

// Set the content of the Text Display
const text = new TextDisplayBuilder().setContent(
	"## Important Information\nAccording to all known laws of aviation, there is no way a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyway because bees don't care what humans think is impossible.",
);

// Add the Text Display to the Modal
modal.addTextDisplayComponents(text);

const modal = new ModalBuilder().setCustomId('myModal').setTitle('My Modal');

const favoriteStarterSelect = new StringSelectMenuBuilder()
	.setCustomId('starter')
	.setPlaceholder('Make a selection!')
	.addOptions(
		// String select menu options
		new StringSelectMenuOptionBuilder()
			// Label displayed to user
			.setLabel('Bulbasaur')
			// Description of option
			.setDescription('The dual-type Grass/Poison Seed Pokémon.')
			// Value returned to in modal submission
			.setValue('bulbasaur'),
		new StringSelectMenuOptionBuilder()
			.setLabel('Charmander')
			.setDescription('The Fire-type Lizard Pokémon.')
			.setValue('charmander'),
		new StringSelectMenuOptionBuilder()
			.setLabel('Squirtle')
			.setDescription('The Water-type Tiny Turtle Pokémon.')
			.setValue('squirtle'),
	);

const favoriteStarterLabel = new LabelBuilder()
	.setLabel("What's some of your favorite Gen 1 Pokémon starter?")
	// The Description is small text under the label above the interactive component
	.setStringSelectMenuComponent(favoriteStarterSelect);

modal.setLabelComponents(favoriteStarterLabel);