'use client';

import {
  getGuilds,
  getTextChannels,
  getVoiceChannels,
  getVolume,
  pauseTrack,
  playTrack,
  resumeTrack,
  sendMessage,
  setVolume,
  skipTrack,
  stopTrack
} from '@/api/guilds';
import { GuildChannel, GuildInfo } from '@/api/guilds.types';
import { Button, Slider, Tabs, TextInput, Textarea } from '@mantine/core';
import { useForm } from '@mantine/form';
import React, { useEffect, useState } from 'react';

export default function Page() {
  const [guilds, setGuilds] = useState<GuildInfo[]>([]);
  const [activeGuild, setActiveGuild] = useState<GuildInfo | null>(null);
  const [textChannels, setTextChannels] = useState<GuildChannel[]>([]);
  const [voiceChannels, setVoiceChannels] = useState<GuildChannel[]>([]);
  const [guildVolume, setGuildVolume] = useState<number>(50.0);

  useEffect(() => {
    getGuilds().then((g) => {
      setGuilds(g);
      if (g.length > 0) {
        setActiveGuild(g[0]);
      }
    });
  }, []);

  useEffect(() => {
    if (activeGuild) {
      getTextChannels(activeGuild.id).then((c) => setTextChannels(c));
      getVoiceChannels(activeGuild.id).then((c) => setVoiceChannels(c));
      getVolume(activeGuild.id).then((v) => setGuildVolume(v));
    }
  }, [activeGuild]);

  const playForm = useForm({
    initialValues: {
      message: '',
      trackUrl: '',
      volume: 50.0
    }
  });

  return (
    <Tabs orientation='vertical' defaultValue={activeGuild?.name}>
      <Tabs.List>
        {guilds.map((guild) => (
          <Tabs.Tab key={`guild-tab-${guild.id}`} value={guild.name} onClick={() => setActiveGuild(guild)}>
            {guild.name}
          </Tabs.Tab>
        ))}
      </Tabs.List>
      {guilds.map((guild) => (
        <Tabs.Panel key={`guild-${guild.id}`} value={guild.name}>
          <h1>{guild.name}</h1>
          <h2>Text Channels</h2>
          <Tabs orientation='horizontal' defaultValue={textChannels[0]?.name}>
            <Tabs.List>
              {textChannels.map((channel) => (
                <Tabs.Tab key={`text-channel-tab-${channel.id}`} value={channel.name}>
                  {channel.name}
                </Tabs.Tab>
              ))}
            </Tabs.List>
            {textChannels.map((channel) => (
              <Tabs.Panel key={`text-channel-${channel.id}`} value={channel.name}>
                <form
                  style={{ margin: '1em' }}
                  onSubmit={playForm.onSubmit((values) => sendMessage(activeGuild!.id, channel.id, values.message))}
                >
                  <Textarea placeholder='Message...' {...playForm.getInputProps('message')} />
                  <Button type='submit'>Send Message</Button>
                </form>
              </Tabs.Panel>
            ))}
          </Tabs>
          <h2>Voice Channels</h2>
          <Tabs orientation='horizontal' defaultValue={voiceChannels[0]?.name}>
            <Tabs.List>
              {voiceChannels.map((channel) => (
                <Tabs.Tab key={`voice-channel-tab-${channel.id}`} value={channel.name}>
                  {channel.name}
                </Tabs.Tab>
              ))}
            </Tabs.List>
            {voiceChannels.map((channel) => (
              <Tabs.Panel key={`voice-channel-${channel.id}`} value={channel.name}>
                <form
                  style={{ margin: '1em' }}
                  onSubmit={playForm.onSubmit((values) => {
                    playTrack(activeGuild!.id, channel.id, values.trackUrl);
                  })}
                >
                  <TextInput placeholder='Youtube URL...' {...playForm.getInputProps('trackUrl')} />
                  <Button type='submit'>Play Track</Button>
                  <Button onClick={() => skipTrack(activeGuild!.id)}>Skip Track</Button>
                </form>
                <div style={{ margin: '1em' }}>
                  <Button style={{ marginRight: '1em' }} onClick={() => stopTrack(activeGuild!.id)}>
                    Stop
                  </Button>
                  <Button style={{ marginRight: '1em' }} onClick={() => pauseTrack(activeGuild!.id)}>
                    Pause
                  </Button>
                  <Button style={{ marginRight: '1em' }} onClick={() => resumeTrack(activeGuild!.id)}>
                    Resume
                  </Button>
                </div>
                <form
                  style={{ margin: '1em' }}
                  onSubmit={playForm.onSubmit((values) => setVolume(activeGuild!.id, values.volume))}
                >
                  <Slider
                    defaultValue={guildVolume}
                    {...playForm.getInputProps('volume')}
                    marks={[
                      { value: 25, label: '25%' },
                      { value: 50, label: '50%' },
                      { value: 75, label: '75%' }
                    ]}
                  />
                  <Button type='submit'>Set Volume</Button>
                </form>
              </Tabs.Panel>
            ))}
          </Tabs>
        </Tabs.Panel>
      ))}
    </Tabs>
  );
}
