mytable03

import React, { useEffect, useState } from 'react';

const MyTable = ({ filterValues }) => {
  const [intradata, setIntradata] = useState(null);
  const [data, setData] = useState(null);
  const [selectedGroup, setSelectedGroup] = useState('summary');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [columns, setColumns] = useState([]);
  const [validGroups, setValidGroups] = useState([]);
  


  
 // Updated parseDate function
const parseDate = (dateString) => {
  console.log('Parsing date:', dateString);
  try {
    // Check if the date string is in Persian format (contains non-numeric characters)
    const isPersianFormat = /[^\d]/.test(dateString);

    if (isPersianFormat) {
      // Parse Persian date
      const match = dateString.match(/(\d+)/g);

      if (!match || match.length !== 3) {
        throw new Error(`Invalid date format for end_date: ${dateString}`);
      }

      const [year, month, day] = match.map(Number);

      // Convert Persian date to Gregorian date
      const gregorianYear = year + 621; // Add 621 to convert to Gregorian year
      const gregorianMonth = month - 1; // Months are zero-based
      const gregorianDay = day;

      return new Date(gregorianYear, gregorianMonth, gregorianDay);
    } else {
      // Parse Gregorian date
      const [year, month, day] = dateString.match(/(\d+)/g).map(Number);

      return new Date(year, month - 1, day); // Months are zero-based
    }
  } catch (error) {
    console.error('Error parsing date:', error);
    // Log additional information about the problematic date
    console.log('Problematic date:', dateString);

    // Provide a fallback date (e.g., current date) in case of parsing failure
    return new Date();
  } 
};

  useEffect(() => {
    console.log('Selected Group:', selectedGroup);
    console.log('Filter04 Value:', filterValues.filter04);
    const fetchData = async () => {
      try {
        // Fetch intradatacols
        const intradatacolsResponse = await fetch('http://5.34.198.87:8000/api/options/intradatacols');
        if (!intradatacolsResponse.ok) {
          throw new Error(`HTTP error! Status: ${intradatacolsResponse.status}`);
        }

        const intradatacolsData = await intradatacolsResponse.json();
        console.log('API Response for intradatacols:', intradatacolsData);
        setData(intradatacolsData);

        const groups = Object.keys(intradatacolsData.groups);
        setValidGroups(groups);

        const initialColumns = intradatacolsData.groupscolumn[selectedGroup] || [];
        setColumns(initialColumns);

        if (!groups.includes(selectedGroup)) {
          console.error(`Invalid selectedGroup: ${selectedGroup}`);
          return;
        }

        // Fetch intradata
        const intradataResponse = await fetch('http://5.34.198.87:8000/api/options/intradata');
        if (!intradataResponse.ok) {
          throw new Error(`HTTP error! Status: ${intradataResponse.status}`);
        }

        const intradataData = await intradataResponse.json();
        console.log('API Response for intradata:', intradataData);

        setIntradata(intradataData.data);
      } catch (error) {
        console.error('Error fetching data:', error);
        setError(error.message || 'An error occurred while fetching data.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  },  [selectedGroup, filterValues.filter04]);

  useEffect(() => {
    
    console.log('intradata:', intradata);
    console.log('columns:', columns);
    console.log('data:', data);
  }, [intradata, columns, data]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!intradata || !data || !data.groups || !data.groupscolumn) {
    return <div>No data available</div>;
  }

 // Filter the intradata based on filterValues
const filteredData = intradata.filter((item) => {
  // Check filter01
  if (filterValues.filter01 && item.ua_instrument_id.toString().toLowerCase() !== filterValues.filter01.toString().toLowerCase()) {
    console.log(`ua_instrument_id Filter: ${item.ua_instrument_id} !== ${filterValues.filter01}`);
    return false;
  }

  // Check filter02
  if (filterValues.filter02 && item.option_status.toLowerCase() !== filterValues.filter02.toLowerCase()) {
    console.log(`Filter02: ${item.option_status} !== ${filterValues.filter02}`);
    return false;
  }

// Check option type filter (filter04)
if (filterValues.filter04  && item.option_type.toLowerCase().includes(filterValues.filter04.toLowerCase())) {
  console.log(`Option type Filter: ${item.option_type} does not include ${filterValues.filter04}`);
  console.log('Item Option Type:', item.option_type);
console.log('Filter04 Value:', filterValues.filter04);

  return false;
}

  // Check date range filter
  if (filterValues.startDate && filterValues.endDate) {
    const itemDate = parseDate(item.end_date);

    if (isNaN(itemDate.getTime())) {
      console.error(`Invalid date format for end_date: ${item.end_date}`);
      return false;
    }

    const startDate = parseDate(filterValues.startDate);
    const endDate = parseDate(filterValues.endDate);

    console.log('Item Date:', itemDate);
    console.log('Start Date:', startDate);
    console.log('End Date:', endDate);

    console.log('Column Values:', item[columns[0]]);

    return itemDate >= startDate && itemDate <= endDate;
  }
    return true;
  });

  console.log('Filtered Data:', filteredData);
  console.log('Filtered Data for Rendering:', filteredData);
  

  return (
    <div className="container mt-4">
      <div className="btn-group mb-3">
        {validGroups.map((groupKey) => (
          <button
            key={groupKey}
            type="button"
            className={`btn ${selectedGroup === groupKey ? 'bg-blue-500 text-white' : 'bg-blue-200'}`}
            onClick={() => setSelectedGroup(groupKey)}
          >
            {data.groups[groupKey]}
          </button>
        ))}
      </div>

      <div className="table-container overflow-x-auto" style={{ maxHeight: '400px' }}>
        <table className="table-auto w-full border-collapse border border-gray-800">
          <thead className="bg-gray-800 text-white">
            <tr>
              {columns.map((column, index) => (
                <th key={index} className="py-2 px-4 border border-gray-800">
                  {data.fields[column]}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filteredData.length > 0 ? (
              filteredData.map((item, itemIndex) => (
                <tr key={itemIndex} className={itemIndex % 2 === 0 ? 'bg-gray-100' : 'bg-white'}>
                  {columns.map((column, columnIndex) => (
                    <td key={columnIndex} className="py-2 px-4 border border-gray-800">
                      {item[column] instanceof Date ? item[column].toLocaleDateString() : item[column]}
                    </td>
                  ))}
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={columns.length} className="py-2 px-4 border border-gray-800">
                  No matching data
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default MyTable;