import { useQuery } from '@tanstack/react-query';
import { Center, Icon, Segmented, Spinner } from '@barev/ui';
import { useI18n, useTRPC } from '@barev/web';
import { useState } from 'react';
import { OrderRow } from '../lib.tsx';

export function Orders() {
  const { t } = useI18n();
  const trpc = useTRPC();
  const orders = useQuery({ ...trpc.client.orders.list.queryOptions(), refetchInterval: 20_000 });
  const [tab, setTab] = useState<'active' | 'history'>('active');
  if (!orders.data)
    return (
      <Center>
        <Spinner />
      </Center>
    );
  const list = orders.data[tab];
  return (
    <main className="app">
      <header className="screen-head">
        <h1 className="screen-head__title">{t('client.orders.title')}</h1>
        <a href="#/services" className="pill pill--dark" aria-label={t('client.orders.order')}>
          <Icon name="plus" size={18} strokeWidth={2.6} />
        </a>
      </header>
      <Segmented
        value={tab}
        onChange={setTab}
        options={[
          { value: 'active', label: `${t('client.orders.active')} · ${orders.data.active.length}` },
          { value: 'history', label: t('client.orders.history') },
        ]}
      />
      {list.length === 0 ? (
        <div className="empty-now">
          <p>{t(tab === 'active' ? 'client.home.noOrders' : 'client.orders.noHistory')}</p>
          <a href="#/services" className="pill pill--dark">
            {t('client.orders.order')}
          </a>
        </div>
      ) : (
        <div className="order-list">
          {list.map((o) => (
            <OrderRow key={o.id} o={o} />
          ))}
        </div>
      )}
    </main>
  );
}