lti-web-client/src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx

'use client';

import { ChangeEventHandler, useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import useSWR from 'swr';
import { ColumnDef, SortingState } from '@tanstack/react-table';

import { Icon } from '@iconify/react';
import Table from '@/components/Table';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import Card from '@/components/Card';
import Collapse from '@/components/Collapse';

import { cn, formatDate, formatNumber } from '@/lib/helper';
import { isResponseSuccess } from '@/lib/api-helper';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { ClosingApi } from '@/services/api/closing';
import { ClosingOutgoingSapronak } from '@/types/api/closing';
import SapronakClosingSkeleton from '@/components/pages/closing/skeleton/SapronakClosingSkeleton';

interface ClosingOutgoingSapronaksTableProps {
  projectFlockId: number;
}

const ClosingOutgoingSapronaksTable = ({
  projectFlockId,
}: ClosingOutgoingSapronaksTableProps) => {
  const searchParams = useSearchParams();
  const kandangId = searchParams.get('kandangId');

  const {
    state: tableFilterState,
    updateFilter,
    setPage,
    setPageSize,
    toQueryString: getTableFilterQueryString,
  } = useTableFilter({
    initial: {
      search: '',
      nameSort: '',
    },
    paramMap: {
      page: 'page',
      pageSize: 'limit',
      nameSort: 'sort_name',
    },
  });

  const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
    useSWR(
      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
      ClosingApi.getAllOutgoingSapronakFetcher
    );

  const [open, setOpen] = useState(true);

  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});

  const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronak>[] = [
    {
      header: '#',
      cell: (props) => props.row.index + 1,
    },
    {
      accessorKey: 'date',
      header: 'Tanggal',
      cell: (props) => formatDate(props.row.original.date, 'DD MMM YYYY'),
    },
    {
      accessorKey: 'reference_number',
      header: 'No. Referensi',
    },
    {
      accessorKey: 'transaction_type',
      header: 'Jenis Transaksi',
    },
    {
      accessorKey: 'product_name',
      header: 'Produk',
    },
    {
      accessorKey: 'product_category',
      header: 'Kategori Produk',
    },
    {
      accessorKey: 'source_warehouse',
      header: 'Gudang Asal',
    },
    {
      accessorKey: 'destination_warehouse',
      header: 'Gudang Tujuan',
    },
    {
      accessorKey: 'quantity',
      header: 'Kuantitas',
      cell: (props) =>
        `${formatNumber(props.row.original.quantity)} ${props.row.original.unit}`,
    },
    {
      accessorKey: 'notes',
      header: 'Keterangan',
    },
  ];

  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
    updateFilter('search', e.target.value);
  };

  // track sorting
  useEffect(() => {
    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');

    if (!isNameSorted) {
      updateFilter('nameSort', '');
    } else {
      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
    }
  }, [sorting, updateFilter]);

  useEffect(() => {
    if (!open) {
      setOpen(
        isResponseSuccess(outgoingSapronaks)
          ? outgoingSapronaks.data.length > 0
          : false
      );
    }
  }, [outgoingSapronaks, isResponseSuccess]);

  return (
    <Card
      className={{
        wrapper: 'w-full',
        body: 'p-4 shadow',
      }}
    >
      <Collapse
        open={open}
        onOpenChange={setOpen}
        title={
          <div className='card-actions p-4 justify-between items-center w-full'>
            <div className='card-title'>Sapronak Keluar</div>

            <Icon
              icon='material-symbols:keyboard-arrow-down'
              width={24}
              height={24}
              className={cn('text-primary transition-transform', {
                '-rotate-180': open,
              })}
            />
          </div>
        }
        className='w-full!'
        titleClassName='w-full p-0!'
      >
        <div className='w-full p-0'>
          <div className='flex flex-col gap-2 mb-4'>
            <div className='w-full flex flex-col sm:flex-row justify-start items-end sm:items-center gap-4'>
              <DebouncedTextInput
                name='search'
                placeholder='Cari Sapronak Keluar'
                value={tableFilterState.search}
                onChange={searchChangeHandler}
                className={{ wrapper: 'sm:max-w-3xs' }}
              />
            </div>
          </div>

          {isLoadingOutgoingSapronaks ? (
            <SapronakClosingSkeleton type='outgoing' />
          ) : isResponseSuccess(outgoingSapronaks) &&
            outgoingSapronaks.data.length === 0 ? (
            <SapronakClosingSkeleton
              type='outgoing'
              iconName='heroicons:chart-bar'
              title='Data Sapronak Keluar Tidak Ditemukan'
              subtitle='Tidak ada data sapronak keluar untuk periode ini.'
            />
          ) : (
            <Table<ClosingOutgoingSapronak>
              data={
                isResponseSuccess(outgoingSapronaks)
                  ? outgoingSapronaks?.data
                  : []
              }
              columns={outgoingSapronaksColumns}
              pageSize={tableFilterState.pageSize}
              onPageSizeChange={setPageSize}
              rowOptions={[10, 20, 50, 100]}
              page={
                isResponseSuccess(outgoingSapronaks)
                  ? outgoingSapronaks?.meta?.page
                  : 0
              }
              totalItems={
                isResponseSuccess(outgoingSapronaks)
                  ? outgoingSapronaks?.meta?.total_results
                  : 0
              }
              onPageChange={setPage}
              isLoading={isLoadingOutgoingSapronaks}
              sorting={sorting}
              setSorting={setSorting}
              rowSelection={rowSelection}
              setRowSelection={setRowSelection}
              className={{
                containerClassName: cn({
                  'w-full mb-20':
                    isResponseSuccess(outgoingSapronaks) &&
                    outgoingSapronaks?.data?.length === 0,
                }),
              }}
            />
          )}
        </div>
      </Collapse>
    </Card>
  );
};

export default ClosingOutgoingSapronaksTable;