import { ButtonStyles, ComponentTypes } from 'oceanic.js'
import { currentColor, parseHex, setMemberColor } from '../colors.ts'
import { button, guard, modal, slash } from '../rosepack.ts'

const inGuild = [guard.guild({ message: 'this only works in a server.' })]

const FAILED = 'i could not change your color. ask an admin to check that i have manage roles.'

export const colorModal = modal({
  customID: 'color/set',
  title: 'pick a name color',
  guards: inGuild,
  fields: {
    color: {
      kind: 'text',
      label: 'hex color',
      placeholder: '#ff66aa',
      minLength: 6,
      maxLength: 7,
      required: true,
      style: 'short'
    }
  },

  async execute(context) {
    await context.defer({ ephemeral: true })
    const hex = parseHex(context.values.color)
    if (hex === undefined) {
      await context.reply('that is not a hex color. try something like #ff66aa.')
      return
    }
    const { guildID, member } = context.interaction
    try {
      await setMemberColor(context.client, guildID, member, hex)
    } catch (error) {
      console.error(`could not set ${member.id}'s color to ${hex} in ${guildID}:`, error)
      await context.reply(FAILED)
      return
    }
    await context.reply(`your name color is now ${hex}.`)
  }
})

export const setColorButton = button({
  customID: 'color/pick',
  guards: inGuild,

  async execute(context) {
    const { guildID, member } = context.interaction
    await context.showModal(colorModal, { values: { color: currentColor(guildID, member.roles) } })
  }
})

export const clearColorButton = button({
  customID: 'color/clear',
  guards: inGuild,

  async execute(context) {
    await context.defer({ ephemeral: true })
    const { guildID, member } = context.interaction
    try {
      await setMemberColor(context.client, guildID, member, undefined)
    } catch (error) {
      console.error(`could not clear ${member.id}'s color in ${guildID}:`, error)
      await context.reply(FAILED)
      return
    }
    await context.reply('your name color is cleared.')
  }
})

export default slash({
  name: 'colorpanel',
  description: 'post a panel that lets members pick their own name color',
  guards: [
    guard.guild({ message: 'this command only works in a server.' }),
    guard.userPermissions('MANAGE_ROLES', { message: 'you need manage roles to do that.' })
  ],
  options: {
    message: {
      description: 'what the panel message should say',
      kind: 'string',
      maxLength: 2_000
    }
  },

  async execute(context) {
    await context.defer({ ephemeral: true })
    try {
      await context.client.rest.channels.createMessage(context.interaction.channelID, {
        content: context.options.message ?? 'pick a color for your name!',
        components: [
          {
            type: ComponentTypes.ACTION_ROW,
            components: [
              {
                type: ComponentTypes.BUTTON,
                style: ButtonStyles.PRIMARY,
                customID: setColorButton.buildID(),
                label: 'set color'
              },
              {
                type: ComponentTypes.BUTTON,
                style: ButtonStyles.SECONDARY,
                customID: clearColorButton.buildID(),
                label: 'clear color'
              }
            ]
          }
        ]
      })
    } catch {
      await context.reply(
        'i could not post the panel here. check that i have view channel and send messages in this channel.'
      )
      return
    }
    await context.reply('panel posted.')
  }
})