import { DataTableProvider } from "@/lib/hooks";
import { Trans } from "react-i18next";
import { QuotesDataTable } from "./components";

import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from "@/ui";
import { useToggle } from "@wojtekmaj/react-hooks";
import { t } from "i18next";
import { InfoIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";

export const QuotesList = () => {
  const navigate = useNavigate();
  const [enabledPreview, toggleEnabledPreview] = useToggle(false);

  return (
    <DataTableProvider>
      <div className='flex items-center justify-between space-y-2'>
        <div>
          <h2 className='text-2xl font-bold tracking-tight'>
            <Trans i18nKey='quotes.list.title' />
          </h2>
          <p className='text-muted-foreground'>
            <Trans i18nKey='quotes.list.subtitle' />
          </p>
        </div>
        <div className='flex items-center space-x-2'>
          <Button onClick={() => navigate("/quotes/add")}>{t("quotes.create.title")}</Button>
        </div>
      </div>

      <Tabs defaultValue='all'>
        <div className='flex items-center'>
          <span className='mr-4 font-medium'>Status</span>
          <TabsList>
            <TabsTrigger value='all'>
              <Trans i18nKey='quotes.list.tabs.all' />
            </TabsTrigger>
            <TabsTrigger value='draft'>
              <Trans i18nKey='quotes.list.tabs.draft' />
            </TabsTrigger>
            <TabsTrigger value='emitted'>
              <Trans i18nKey='quotes.list.tabs.emitted' />
            </TabsTrigger>
            <TabsTrigger value='archived' className='hidden sm:flex'>
              <Trans i18nKey='quotes.list.tabs.archived' />
            </TabsTrigger>
          </TabsList>
          <div className='flex items-center gap-2 ml-auto'>
            <Toggle
              aria-label='Show quote preview'
              variant={"outline"}
              defaultPressed={false}
              pressed={enabledPreview}
              onPressedChange={toggleEnabledPreview}
            >
              <InfoIcon className='w-4 h-4 mr-2' />
              Quote preview
            </Toggle>
          </div>
        </div>
        <TabsContent value='all'>
          <QuotesDataTable status='all' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='draft'>
          <QuotesDataTable status='draft' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='archived'>
          <QuotesDataTable status='archived' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='emitted'>
          <QuotesDataTable status='emitted' preview={enabledPreview} />
        </TabsContent>
      </Tabs>
    </DataTableProvider>
  );
};