ReceivingTableData

import { Typography, Skeleton } from '@mui/material';
import { useState, useEffect } from 'react';
import debounce from 'lodash.debounce';
import axiosInstance from 'utils/axiosInstance';
import TagStyles from 'views/utilities/status-styles/tagStyles';
import TrackingStatus from 'views/utilities/status-styles/trackingStatus';
import ReceiveDialog from './receive-dialog/receiveDialog';
import ConfirmDialog from './confirm-dialog/confirmDialog';
import DetailDialogWarehouse from './detail-dialog/detail-warehouse/detailDialogWarehouse';
import StatusStyles from 'views/utilities/status-styles/statusStyles';
import DetailDialog from './detail-dialog/detail-serpo/detailDialog';
import FormatDateToString from 'views/utilities/formatDateToString';
import TagChipStyles from 'views/utilities/status-styles/tagChipStyles';
import checkPermission from 'utils/permissions';
import ActionButton from 'ui-component/Button/actionButton';

export default function Data(code) {
  const [posts, setPosts] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  // const [from, setFrom] = useState('');
  const [meta, setMeta] = useState({
    page: 1,
    per_page: 10,
    total_pages: 1,
    total_rows: 0
  });

  useEffect(() => {
    code && setSearchValue(code);
  }, [code]);

  // fetch data
  const fetchData = async (page, search, limit, tag, start_date, end_date, logistic_ids, status) => {
    try {
      const params = new URLSearchParams();
      params.append('page', page);
      params.append('limit', limit);
      params.append('search', search);

      if (tag.length > 0) {
        tag.forEach((select) => {
          params.append('tag', select);
        });
      }

      if (start_date) {
        params.append('start_date', start_date);
      }

      if (end_date) {
        params.append('end_date', end_date);
      }

      if (logistic_ids.length > 0) {
        logistic_ids.forEach((id) => {
          params.append('logistic_ids', id);
        });
      }

      if (status.length > 0) {
        status.forEach((id) => {
          params.append('status', id);
        });
      }

      const hasPermission = checkPermission('List Table Receiving Package');
      if (!hasPermission) {
        return;
      }

      const response = await axiosInstance.get('/transfer/receiving-control', {
        params: params
      });
      if (response?.data) {
        setPosts(response.data.data);
        setMeta(response.data.meta);
        setIsLoading(false);
      }
    } catch (error) {
      setIsLoading(false);
      console.error('Error fetching data:', error);
    }
  };
  const onSearchChange = debounce((event) => {
    setIsLoading(true);
    const newValue = event.target.value;
    setSearchValue(newValue);
    setMeta({ ...meta, page: 1 });
  }, 500);

  const setPage = (value) => {
    setMeta({
      ...meta,
      page: value
    });
  };

  const setPerPage = (value) => {
    setMeta({
      ...meta,
      per_page: value
    });
  };

  //isSelected untuk active filter
  const [isSelectedTag, setIsSelectedTag] = useState(false);
  const [isSelectedDate, setIsSelectedDate] = useState(false);
  const [isSelectedLogistic, setIsSelectedLogistic] = useState(false);
  const [isSelectedStatus, setIsSelectedStatus] = useState(false);

  //untuk value yg dipilih tampil di chip
  const [selectedTag, setSelectedTag] = useState([]);
  const [selectedLogistic, setSelectedLogistic] = useState([]);
  const [selectedStatus, setSelectedStatus] = useState([]);

  //selected untuk menampilkan chip result filter
  const [selected, setSelected] = useState([]);
  useEffect(() => {
    const formatDate = (dateString) => {
      const [year, month, day] = dateString.split('-');
      return `${day}/${month}/${year}`;
    };
    const formatRange = (startDate, endDate) => {
      const formattedStartDate = formatDate(startDate);
      const formattedEndDate = formatDate(endDate);
      return `${formattedStartDate} - ${formattedEndDate}`;
    };

    const mergedSelections = [...selectedTag, ...selectedLogistic, ...selectedStatus];

    if (startDate && endDate) {
      mergedSelections.unshift(formatRange(startDate, endDate));
    }

    setSelected(mergedSelections);
  }, [selectedTag, startDate, endDate, selectedLogistic, selectedStatus]);

  //untuk mengubah active filter button
  useEffect(() => {
    setIsSelectedTag(selectedTag.length > 0);
    setIsSelectedDate(startDate !== null);
    setIsSelectedLogistic(selectedLogistic.length > 0);
    setIsSelectedStatus(selectedStatus.length > 0);
  }, [selectedTag, startDate, selectedLogistic, selectedStatus]);

  const [selectedTagId, setSelectedTagId] = useState([]);
  const handleCheckboxTagChange = (event, value, label) => {
    const isChecked = event.target.checked;

    const updateSelected = (arr, val) => {
      if (isChecked && !arr.includes(val)) {
        return [...arr, val];
      } else {
        return arr.filter((item) => item !== val);
      }
    };
    const newSelectedTagId = updateSelected([...selectedTagId], value);
    const newSelectedTagName = updateSelected([...selectedTag], label);

    setSelectedTagId(newSelectedTagId);
    setSelectedTag(newSelectedTagName);
    setMeta({ ...meta, page: 1 });
  };

  const [selectedLogisticId, setSelectedLogisticId] = useState([]);
  const handleCheckboxLogisticChange = (event, value, label) => {
    const isChecked = event.target.checked;

    const updateSelected = (arr, val) => {
      if (isChecked && !arr.includes(val)) {
        return [...arr, val];
      } else {
        return arr.filter((item) => item !== val);
      }
    };

    const newSelectedLogisticId = updateSelected([...selectedLogisticId], value);
    const newSelectedLogisticName = updateSelected([...selectedLogistic], label);

    setSelectedLogisticId(newSelectedLogisticId);
    setSelectedLogistic(newSelectedLogisticName);
    setMeta({ ...meta, page: 1 });
  };

  const [selectedStatusId, setSelectedStatusId] = useState([]);
  const handleCheckboxStatusChange = (event, value, label) => {
    const isChecked = event.target.checked;

    const updateSelected = (arr, val) => {
      if (isChecked && !arr.includes(val)) {
        return [...arr, val];
      } else {
        return arr.filter((item) => item !== val);
      }
    };

    const newSelectedStatusId = updateSelected([...selectedStatusId], value);
    const newSelectedStatusName = updateSelected([...selectedStatus], label);

    setSelectedStatusId(newSelectedStatusId);
    setSelectedStatus(newSelectedStatusName);
    setMeta({ ...meta, page: 1 });
  };

  const handleDeleteFilter = (selectedItem) => {
    const newSelected = selected.filter((item) => item !== selectedItem);
    setSelected(newSelected);

    if (selectedTag.includes(selectedItem)) {
      const newSelectedTag = selectedTag.filter((item) => item !== selectedItem);
      setSelectedTag(newSelectedTag);
      const newSelectedTagId = selectedTagId.filter((item, index) => selectedTag[index] !== selectedItem);

      setSelectedTagId(newSelectedTagId);
    }

    if (startDate !== null && endDate !== null) {
      setStartDate(null);
      setEndDate(null);
    }

    if (selectedLogistic.includes(selectedItem)) {
      const newSelectedLogistic = selectedLogistic.filter((item) => item !== selectedItem);
      setSelectedLogistic(newSelectedLogistic);
      const newSelectedLogisticId = selectedLogisticId.filter((item, index) => selectedLogistic[index] !== selectedItem);

      setSelectedLogisticId(newSelectedLogisticId);
    }

    if (selectedStatus.includes(selectedItem)) {
      const newSelectedStatus = selectedStatus.filter((item) => item !== selectedItem);
      setSelectedStatus(newSelectedStatus);
      const newSelectedStatusId = selectedStatusId.filter((item, index) => selectedStatus[index] !== selectedItem);

      setSelectedStatusId(newSelectedStatusId);
    }
  };

  const handleDeleteAll = () => {
    setSelected([]);

    setSelectedTag([]);
    setSelectedTagId([]);
    setStartDate(null);
    setEndDate(null);
    setSelectedLogistic([]);
    setSelectedLogisticId([]);
    setSelectedStatus([]);
    setSelectedStatusId([]);
  };

  // handle filter date
  const formatDateToISO = (date) => {
    if (date) {
      // convert date to west indonesia time zone(GMT+0700
      const gmtDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
      // ambil year,month,day
      const year = gmtDate.getFullYear();
      const month = String(gmtDate.getMonth() + 1).padStart(2, '0');
      const day = String(gmtDate.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
    return null;
  };

  //handle milih tanggal
  const handleSelectDate = (event, value) => {
    const today = new Date();
    const formattedTodayDate = today.toISOString().split('T')[0];

    const yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1);
    const formattedYesterday = yesterday.toISOString().split('T')[0];

    const startOfWeek = new Date(today);
    startOfWeek.setDate(today.getDate() - today.getDay());
    const endOfWeek = new Date(startOfWeek);
    endOfWeek.setDate(startOfWeek.getDate() + 6);
    const formattedStartWeek = startOfWeek.toISOString().split('T')[0];
    const formattedEndWeek = endOfWeek.toISOString().split('T')[0];

    const sevenDaysAgo = new Date(today);
    sevenDaysAgo.setDate(today.getDate() - 6);
    const formattedSevendays = sevenDaysAgo.toISOString().split('T')[0];

    const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
    const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    const formattedStartMonth = startOfMonth.toISOString().split('T')[0];
    const formattedEndMonth = endOfMonth.toISOString().split('T')[0];

    const thirtyDaysAgo = new Date(today);
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 29);
    const formattedThirtydays = thirtyDaysAgo.toISOString().split('T')[0];

    switch (value) {
      case 'today':
        setStartDate(formattedTodayDate);
        setEndDate(formattedTodayDate);
        setMeta({ ...meta, page: 1 });
        break;
      case 'yesterday':
        setStartDate(formattedYesterday);
        setEndDate(formattedYesterday);
        setMeta({ ...meta, page: 1 });
        break;
      case 'week':
        setStartDate(formattedStartWeek);
        setEndDate(formattedEndWeek);
        setMeta({ ...meta, page: 1 });
        break;
      case 'sevendays':
        setStartDate(formattedSevendays);
        setEndDate(formattedTodayDate);
        setMeta({ ...meta, page: 1 });
        break;
      case 'month':
        setStartDate(formattedStartMonth);
        setEndDate(formattedEndMonth);
        setMeta({ ...meta, page: 1 });
        break;
      case 'thirtydays':
        setStartDate(formattedThirtydays);
        setEndDate(formattedTodayDate);
        setMeta({ ...meta, page: 1 });
        break;
      default:
        // Do something for an unknown value
        break;
    }
  };

  const handleDateChange = async (newDateRange) => {
    const start = newDateRange[0];
    const end = newDateRange[1];
    const formattedStartDate = formatDateToISO(start);
    const formattedEndDate = formatDateToISO(end);
    setStartDate(formattedStartDate);
    setEndDate(formattedEndDate);
    setMeta({ ...meta, page: 1 });
  };
  // end filter

  useEffect(() => {
    fetchData(meta.page, searchValue, meta.per_page, selectedTag, startDate, endDate, selectedLogisticId, selectedStatusId);
  }, [meta.page, searchValue, meta.per_page, selectedTag, startDate, endDate, selectedLogisticId, selectedStatusId]);

  const receivePermission = checkPermission('Action Received');
  const confirmPermission = checkPermission('Action Confirm');

  // handle verify vendor
  const handleVerifyVendor = async (id) => {
    const formData = {
      confirm: []
    };
    try {
      await axiosInstance.post(`/transfer/receiving-control/${id}/verify-transfer`, formData);
      const successMessage = 'Successfully Added New Data';
      localStorage.setItem('successMessage', successMessage);
      window.location.reload();
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return {
    columns: [
      { accessor: 'no', Header: 'No' },
      { accessor: 'tag', Header: 'Tag' },
      { accessor: 'package_code', Header: 'Package Code' },
      { accessor: 'delivery_date', Header: 'Delivery Date' },
      { accessor: 'quantity', Header: 'Quantity' },
      // { accessor: 'package_overview', Header: 'Package Overview' },
      { accessor: 'confirmed', Header: 'Confirmed' },
      { accessor: 'logistics', Header: 'Shipping' },
      { accessor: 'status', Header: 'Status' },
      { accessor: 'action', Header: 'Action' }
    ],
    rows: posts
      ? posts?.map((data, index) => ({
          no: <Typography sx={{ fontSize: '11px' }}>{meta.per_page * (meta.page - 1) + (index + 1)}</Typography>,
          tag: (
            <Typography
              sx={{
                ...TagChipStyles.tagChip,
                ...TagStyles(data?.tag)
              }}
            >
              {data?.tag}
            </Typography>
          ),
          package_code: <Typography sx={{ fontSize: '11px' }}>{data.package_code}</Typography>,
          delivery_date: <Typography sx={{ fontSize: '11px' }}>{FormatDateToString(data?.delivery_date)}</Typography>,
          quantity: (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Typography sx={{ fontSize: '11px' }}>{data?.quantity}</Typography>{' '}
              {data.tag === 'Warehouse' ? (
                <DetailDialogWarehouse id={data.id} tag={data.tag} status={data.status} />
              ) : (
                <DetailDialog id={data.id} tag={data.tag} />
              )}
            </div>
          ),
          // package_overview:
          //   data.tag === 'Warehouse' ? (
          //     <DetailDialogWarehouse id={data.id} tag={data.tag} status={data.status} />
          //   ) : (
          //     <DetailDialog id={data.id} tag={data.tag} />
          //   ),
          confirmed: (
            <Typography sx={{ fontSize: '11px', color: data?.status === 'Verified' ? '#4CA726' : '#F28F27', fontWeight: '600' }}>
              {data?.confirmed}
            </Typography>
          ),
          logistics: <Typography sx={{ fontSize: '11px' }}>{data?.logistic}</Typography>,
          status: (
            <Typography
              sx={{
                ...StatusStyles.statusChip,
                width: 'fit-content',
                ...TrackingStatus(data.status)
              }}
            >
              {data.status === 'Verified' ? 'Completed' : data.status}
            </Typography>
          ),
          action:
            data.status === 'In Delivery' || data.status === 'Preparing' ? (
              receivePermission && <ReceiveDialog isDisabled={data.status === 'Preparing'} id={data?.id} />
            ) : (
              <>
                {data.tag === 'Vendor' || data.tag === 'Request Paper' ? (
                  <ActionButton
                    onClick={() => {
                      handleVerifyVendor(data?.id);
                    }}
                    disabled={data.status === 'Verified'}
                    variant={data.status === 'Verified' ? 'outlined' : null}
                  >
                    {data.status === 'Verified' ? 'Anything skipped ?' : 'Confirm'}
                  </ActionButton>
                ) : (
                  confirmPermission && <ConfirmDialog status={data.status} id={data?.id} />
                )}
              </>
            )
        }))
      : [],
    skeleton: [
      {
        no: <Skeleton />,
        tag: <Skeleton />,
        package_code: <Skeleton />,
        delivery_date: <Skeleton />,
        quantity: <Skeleton />,
        confirmed: <Skeleton />,
        logistics: <Skeleton />,
        status: <Skeleton />,
        action: <Skeleton />
      }
    ],
    isLoading,
    receivingData: posts,
    onSearchChange: onSearchChange,
    meta: meta,
    setPage: setPage,
    setPerPage: setPerPage,

    selectedTag,
    isSelectedTag,
    handleCheckboxTagChange,

    startDate,
    endDate,
    isSelectedDate,
    handleDateChange,
    handleSelectDate,

    handleDeleteFilter,
    selected,
    handleDeleteAll,

    selectedLogistic,
    isSelectedLogistic,
    handleCheckboxLogisticChange,

    selectedStatus,
    isSelectedStatus,
    handleCheckboxStatusChange

    // handleFilterClick: handleFilterClick
  };
}