lti-web-client/src/components/pages/production/project-flock/ProjectFlockTable.tsx

'use client';

import Button from '@/components/Button';
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
import SelectInput, { OptionType } from '@/components/input/SelectInput';
import { useModal } from '@/components/Modal';
import ConfirmationModal from '@/components/modal/ConfirmationModal';
import Table from '@/components/Table';
import RowCollapseOptions from '@/components/table/RowCollapseOptions';
import RowDropdownOptions from '@/components/table/RowDropdownOptions';
import { ROWS_OPTIONS } from '@/config/constant';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { cn } from '@/lib/helper';
import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
import { ProjectFlockApi } from '@/services/api/production';
import { useTableFilter } from '@/services/hooks/useTableFilter';
import { BaseApiResponse } from '@/types/api/api-general';
import { Kandang } from '@/types/api/master-data/kandang';
import { ProjectFlock } from '@/types/api/production/project-flock';
import { Icon } from '@iconify/react';
import {
  CellContext,
  ColumnDef,
  SortingState,
} from '@tanstack/react-table';
import { ChangeEventHandler, useState } from 'react';
import toast from 'react-hot-toast';
import useSWR from 'swr';

const RowOptionsMenu = ({
  type = 'dropdown',
  props,
  deleteClickHandler,
}: {
  type: 'dropdown' | 'collapse';
  props: CellContext<ProjectFlock, unknown>;
  deleteClickHandler: () => void;
}) => {
  return (
    <div
      tabIndex={type == 'dropdown' ? 0 : undefined}
      className={cn(
        {
          'dropdown-content': type === 'dropdown',
          'mt-2': type === 'collapse',
        },
        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
      )}
    >
      <Button
        href={`/production/project-flock/detail?projectFlockId=${props.row.original.id}`}
        variant='ghost'
        color='primary'
        className='justify-start text-sm'
      >
        <Icon icon='mdi:eye-outline' width={16} height={16} />
        Detail
      </Button>
      <Button
        href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
        variant='ghost'
        color='success'
        className='justify-start text-sm'
      >
        <Icon icon='mdi:home-import-outline' width={16} height={16} />
        Chickin
      </Button>
      {/* <Button
        href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
        variant='ghost'
        color='warning'
        className='justify-start text-sm'
      >
        <Icon icon='mdi:pencil-outline' width={16} height={16} />
        Edit
      </Button> */}
      <Button
        onClick={deleteClickHandler}
        variant='ghost'
        color='error'
        className='text-error hover:text-inherit'
      >
        <Icon
          icon='material-symbols:delete-outline-rounded'
          width={16}
          height={16}
          className='justify-start text-sm'
        />
        Delete
      </Button>
    </div>
  );
};

const ProjectFlockTable = () => {
  const {
    state: tableFilterState,
    updateFilter,
    setPage,
    setPageSize,
    toQueryString: getTableFilterQueryString,
  } = useTableFilter({
    initial: {
      search: '',
      areaFilter: '',
      locationFilter: '',
      kandangFilter: '',
      periodFilter: '',
    },
    paramMap: {
      page: 'page',
      pageSize: 'limit',
      search: 'search',
      areaFilter: 'area_id',
      locationFilter: 'location_id',
      kandangFilter: 'kandang_id',
      periodFilter: 'period',
    },
  });
  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
  const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');

  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
    null
  );
  const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
    null
  );
  const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);

  // Fetch Data
  const {
    data: projectFlocks,
    isLoading,
    mutate: refreshProjectFlocks,
  } = useSWR(
    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
    ProjectFlockApi.getAllFetcher
  );

  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
    search: areaSelectInputValue,
    limit: '100',
  }).toString()}`;
  const {
    data: areas,
    isLoading: isLoadingAreas,
  } = useSWR(areaUrl, AreaApi.getAllFetcher);

  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
    search: locationSelectInputValue,
    area_id: selectedArea != null ? selectedArea.value.toString() : '',
    limit: '100',
  }).toString()}`;
  const {
    data: locations,
    isLoading: isLoadingLocations,
  } = useSWR(locationUrl, LocationApi.getAllFetcher);

  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
    search: kandangSelectInputValue,
    location_id:
      selectedLocation != null ? selectedLocation.value.toString() : '',
    limit: '100',
  }).toString()}`;
  const {
    data: kandangs,
    isLoading: isLoadingKandang,
  } = useSWR(kandangUrl, KandangApi.getAllFetcher);

  // Data to Options Mapping
  const optionsArea = isResponseSuccess(areas)
    ? areas?.data.map((area) => ({
        value: area.id,
        label: area.name,
      }))
    : [];
  const optionsKandang = isResponseSuccess(kandangs)
    ? kandangs?.data.map((kandang) => ({
        value: kandang.id,
        label: kandang.name,
      }))
    : [];
  const optionsLocation = isResponseSuccess(locations)
    ? locations?.data.map((location) => ({
        value: location.id,
        label: location.name,
      }))
    : [];

  // State
  const [sorting, setSorting] = useState<SortingState>([]);
  const [selectedProjectFlock, setSelectedProjectFlock] =
    useState<ProjectFlock>();
  const deleteModal = useModal();
  const confirmModal = useModal();
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
  const [isApproveLoading, setIsApproveLoading] = useState(false);

  // Columns
  const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
    {
      id: 'select',
      header: () => {
        const allSelected =
          isResponseSuccess(projectFlocks) &&
          projectFlocks.data.length > 0 &&
          selectedIds.length === projectFlocks.data.length;

        return (
          <input
            type='checkbox'
            className='checkbox checkbox-sm'
            checked={allSelected}
            onChange={(e) => handleSelectAll(e.target.checked)}
          />
        );
      },
      cell: (props) => {
        const id = props.row.original.id;
        const isChecked = selectedIds.includes(id);

        return (
          <input
            type='checkbox'
            className='checkbox checkbox-sm'
            checked={isChecked}
            onChange={(e) => handleSelectRow(id, e.target.checked)}
          />
        );
      },
    },

    {
      accessorKey: 'flock.name',
      header: 'Flock',
    },
    {
      accessorKey: 'area.name',
      header: 'Area',
    },
    {
      accessorKey: 'location.name',
      header: 'Lokasi',
    },
    {
      accessorKey: 'fcr.name',
      header: 'FCR',
    },
    {
      accessorKey: 'category',
      header: 'Kategori',
    },
    {
      header: 'Kandang',
      cell: (props) => {
        const kandang = props.row.original.kandangs;
        if (kandang) {
          const kandangNames = kandang.map((k: Kandang) => k.name);
          return (
            <div>
              {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
            </div>
          );
        } else {
          return '-';
        }
      },
    },
    {
      accessorKey: 'period',
      header: 'Periode',
    },
    {
      accessorKey: 'created_at',
      header: 'Dibuat pada',
      cell: (props) =>
        new Date(props.row.original.created_at).toLocaleDateString(),
    },
    {
      header: 'Aksi',
      cell: (props) => {
        const currentPageSize = props.table.getPaginationRowModel().rows.length;
        const currentPageRows = props.table.getPaginationRowModel().flatRows;
        const currentRowRelativeIndex =
          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;

        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;

        const deleteClickHandler = () => {
          setSelectedProjectFlock(props.row.original);
          deleteModal.openModal();
        };

        return (
          <>
            {currentPageSize > 2 && (
              <RowDropdownOptions isLast2Rows={isLast2Rows}>
                <RowOptionsMenu
                  type='dropdown'
                  props={props}
                  deleteClickHandler={deleteClickHandler}
                />
              </RowDropdownOptions>
            )}

            {currentPageSize <= 2 && (
              <RowCollapseOptions>
                <RowOptionsMenu
                  type='dropdown'
                  props={props}
                  deleteClickHandler={deleteClickHandler}
                />
              </RowCollapseOptions>
            )}
          </>
        );
      },
    },
  ];

  // Handler
  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
    const newVal = val as OptionType;
    setPageSize(newVal.value as number);
  };
  const confirmationModalDeleteClickHandler = async () => {
    setIsDeleteLoading(true);

    await ProjectFlockApi.delete(selectedProjectFlock?.id as number);
    refreshProjectFlocks();

    deleteModal.closeModal();
    toast.success('Successfully delete Project Flock!');
    setIsDeleteLoading(false);
  };
  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
    updateFilter('search', e.target.value);
  };
  const handleSelectAll = (checked: boolean) => {
    if (checked && isResponseSuccess(projectFlocks)) {
      const allIds = projectFlocks.data.map((item) => item.id);
      setSelectedIds(allIds);
      setSelectedFlocks(projectFlocks.data);
    } else {
      setSelectedIds([]);
      setSelectedFlocks([]);
    }
  };

  const handleSelectRow = (id: number, checked: boolean) => {
    if (!isResponseSuccess(projectFlocks)) return;

    const targetFlock = projectFlocks.data.find((item) => item.id === id);

    if (!targetFlock) return;

    if (checked) {
      setSelectedIds((prev) => [...prev, id]);
      setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
    } else {
      setSelectedIds((prev) => prev.filter((val) => val !== id));
      setSelectedFlocks((prev) =>
        (prev || []).filter((flock) => flock.id !== id)
      );
    }
  };

  const confirmationModalApproveClickHandler = async () => {
    setIsApproveLoading(true);
    const approveProjectFlockRes = await ProjectFlockApi.customRequest<
      BaseApiResponse<ProjectFlock>,
      'POST'
    >(`/approve`, {
      method: 'POST',
      payload: 'POST',
      params: {
        ids: selectedFlocks.map((flock) => flock.id).join(','),
      },
    });

    if (isResponseSuccess(approveProjectFlockRes)) {
      toast.success('Project Flock berhasil di-approve!');
      confirmModal.closeModal();
    }
    if (isResponseError(approveProjectFlockRes)) {
      toast.error(approveProjectFlockRes?.message as string);
      confirmModal.closeModal();
    }
    setIsApproveLoading(false);
  };

  return (
    <>
      <div className='w-full p-0 sm:p-4'>
        <div className='flex flex-col gap-2 mb-4'>
          <div className='w-full flex flex-col justify-between items-end gap-2'>
            <div className='flex flex-col sm:flex-row gap-3 w-full'>
              <Button
                href='/production/project-flock/add'
                color='primary'
                className='w-full sm:w-fit'
              >
                <Icon icon='ic:round-plus' width={24} height={24} />
                Tambah
              </Button>
              <Button
                variant='outline'
                color='success'
                onClick={() => {
                  if (selectedIds.length > 0) {
                    confirmModal.openModal();
                  }
                }}
                disabled={!(selectedIds.length > 0)}
                className='w-full sm:w-fit'
              >
                <Icon icon='material-symbols:check' width={24} height={24} />
                Approve
              </Button>
              <div className='ms-auto w-full sm:w-auto'>
                <DebouncedTextInput
                  name='search'
                  placeholder='Cari Area'
                  value={tableFilterState.search}
                  onChange={searchChangeHandler}
                  className={{
                    wrapper: 'w-full sm:max-w-3xs',
                    input: 'w-full',
                    inputWrapper: 'w-full',
                  }}
                />
              </div>
            </div>
            <div className='hidden sm:flex flex-row justify-end gap-6 w-full'>
              <SelectInput
                label='Area'
                options={optionsArea}
                isLoading={isLoadingAreas}
                value={selectedArea}
                onChange={(val) => {
                  setSelectedArea(val as OptionType);
                  updateFilter(
                    'areaFilter',
                    (val as OptionType)?.value.toString()
                  );
                }}
                onInputChange={setAreaSelectInputValue}
                isClearable
              />
              <SelectInput
                label='Lokasi'
                options={optionsLocation}
                isLoading={isLoadingLocations}
                value={selectedLocation}
                onChange={(val) => {
                  setSelectedLocation(val as OptionType);
                  updateFilter(
                    'locationFilter',
                    (val as OptionType)?.value.toString()
                  );
                }}
                onInputChange={setLocationSelectInputValue}
                isClearable
              />
              <SelectInput
                label='Kandang'
                options={optionsKandang}
                isLoading={isLoadingKandang}
                value={selectedKandang}
                onChange={(val) => {
                  setSelectedKandang(val as OptionType);
                  updateFilter(
                    'kandangFilter',
                    (val as OptionType)?.value.toString()
                  );
                }}
                onInputChange={setKandangSelectInputValue}
                isClearable
              />
              <DebouncedTextInput
                name='period'
                type='number'
                label='Periode'
                placeholder='Masukan periode'
                value={periodInputValue ?? ''}
                onChange={(e) => {
                  setPeriodInputValue(parseInt(e.target.value));
                  updateFilter('periodFilter', e.target.value);
                }}
              />
              <SelectInput
                label='Baris'
                options={ROWS_OPTIONS}
                value={{
                  label: String(tableFilterState.pageSize),
                  value: tableFilterState.pageSize,
                }}
                onChange={pageSizeChangeHandler}
                className={{ wrapper: 'max-w-28' }}
              />
            </div>
          </div>

          <Table<ProjectFlock>
            data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
            columns={projectFlocksColumns}
            pageSize={tableFilterState.pageSize}
            page={
              isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
            }
            totalItems={
              isResponseSuccess(projectFlocks)
                ? projectFlocks?.meta?.total_results
                : 0
            }
            onPageChange={setPage}
            isLoading={isLoading}
            sorting={sorting}
            setSorting={setSorting}
            className={{
              containerClassName: cn({
                'mb-20':
                  isResponseSuccess(projectFlocks) &&
                  projectFlocks?.data?.length === 0,
              }),
              tableWrapperClassName: 'overflow-x-auto min-h-full!',
              tableClassName: 'font-inter w-full table-auto min-h-full!',
              headerRowClassName: 'border-b border-b-gray-200',
              headerColumnClassName:
                'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
              bodyRowClassName: 'border-b border-b-gray-200',
              bodyColumnClassName:
                'px-6 py-3 last:flex last:flex-row last:justify-end',
            }}
          />
        </div>
      </div>

      <ConfirmationModal
        ref={deleteModal.ref}
        type='error'
        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock?.name})?`}
        secondaryButton={{
          text: 'Tidak',
        }}
        primaryButton={{
          text: 'Ya',
          color: 'error',
          isLoading: isDeleteLoading,
          onClick: confirmationModalDeleteClickHandler,
        }}
      />

      <ConfirmationModal
        ref={confirmModal.ref}
        type='success'
        text={
          selectedFlocks.length > 0
            ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
                .map(
                  (flock) =>
                    `${flock.flock?.name ?? '(Tanpa nama)'} - ${
                      flock.area?.name ?? '-'
                    }`
                )
                .join(', ')})`
            : 'Tidak ada Project Flock yang dipilih.'
        }
        secondaryButton={{
          text: 'Tidak',
        }}
        primaryButton={{
          text: 'Ya',
          color: 'success',
          onClick: confirmationModalApproveClickHandler,
          isLoading: isApproveLoading,
        }}
      />
    </>
  );
};

export default ProjectFlockTable;