import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
import { FunctionComponent, useEffect, useState } from 'react';

import { useTranslation } from 'next-i18next';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import { IModule } from '../ModuleTypes';
import { UsenetQueueList } from './UsenetQueueList';
import { UsenetHistoryList } from './UsenetHistoryList';
import { useGetServiceByType } from '../../tools/hooks/useGetServiceByType';
import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api';
import { humanFileSize } from '../../tools/humanFileSize';
import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';

dayjs.extend(duration);

export const UsenetComponent: FunctionComponent = () => {
  const downloadServices = useGetServiceByType('Sabnzbd');

  const { t } = useTranslation('modules/usenet');

  const [selectedServiceId, setSelectedService] = useState<string | null>(downloadServices[0]?.id);
  const { data } = useGetUsenetInfo({ serviceId: selectedServiceId! });

  useEffect(() => {
    if (!selectedServiceId && downloadServices.length) {
      setSelectedService(downloadServices[0].id);
    }
  }, [downloadServices, selectedServiceId]);

  const { mutate: pause } = usePauseUsenetQueue({ serviceId: selectedServiceId! });
  const { mutate: resume } = useResumeUsenetQueue({ serviceId: selectedServiceId! });

  if (downloadServices.length === 0) {
    return (
      <Stack>
        <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
        <Group>
          <Text>{t('card.errors.noDownloadClients.text')}</Text>
          <AddItemShelfButton />
        </Group>
      </Stack>
    );
  }

  if (!selectedServiceId) {
    return null;
  }

  return (
    <Tabs keepMounted={false} defaultValue="queue">
      <Group mb="md">
        <Tabs.List style={{ flex: 1 }}>
          <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
          <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
          {data && (
            <Group position="right" ml="auto" mb="lg">
              <Badge>{humanFileSize(data?.speed)}/s</Badge>
              <Badge>
                {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
              </Badge>
              {data.paused ? (
                <Button uppercase onClick={() => resume()} radius="xl" size="xs">
                  <IconPlayerPlay size={16} style={{ marginRight: 5 }} /> {t('info.paused')}
                </Button>
              ) : (
                <Button uppercase onClick={() => pause()} radius="xl" size="xs">
                  <IconPlayerPause size={16} style={{ marginRight: 5 }} />{' '}
                  {dayjs.duration(data.eta, 's').format('HH:mm:ss')}
                </Button>
              )}
            </Group>
          )}
        </Tabs.List>
        {downloadServices.length > 1 && (
          <Select
            value={selectedServiceId}
            onChange={setSelectedService}
            ml="xs"
            data={downloadServices.map((service) => ({ value: service.id, label: service.name }))}
          />
        )}
      </Group>
      <Tabs.Panel value="queue">
        <UsenetQueueList serviceId={selectedServiceId} />
      </Tabs.Panel>
      <Tabs.Panel value="history">
        <UsenetHistoryList serviceId={selectedServiceId} />
      </Tabs.Panel>
    </Tabs>
  );
};

export const UsenetModule: IModule = {
  id: 'usenet',
  title: 'Usenet',
  icon: IconDownload,
  component: UsenetComponent,
};

export default UsenetComponent;