import React, { useState, useMemo } from 'react';
import {Text, View, StyleSheet} from 'react-native';
import NotificationView from './view';

const Notification = (props) => {
  //Xử lý tabView
    const dataListTabView = [
    { key: "All", title: "Tất cả" },
    { key: "Study", title: "Học tập" },
    { key: "Activity", title: "Hoạt động" },
    { key: "Tuition", title: "Học phí" },
  ];
  const [activeTab, setActiveTab] = useState("All");
  const [dataNotifi, setDataNotifi] = useState({
    All: [
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
      {
        title_notifi: 'Thông báo nghỉ học',
        message: 'Thông báo nghỉ học do tình hình bão số 4 phức tạp',
        time: '14/4/2024'
      },
    ],
    Study: [],
    Activity: [],
    Tuition: [
      {
        title_notifi_tuition: 'Thông báo nghỉ học',
        date_create: '16:00 23/07/2025 ',
        time_send: '09:00 30/07/2025 ',
        style: 'Thông báo cá nhân',
        status: 'Chưa gửi',
      },
      {
        title_notifi_tuition: 'Thông báo nghỉ học',
        date_create: '16:00 23/07/2025 ',
        time_send: '09:00 30/07/2025 ',
        style: 'Thông báo cá nhân',
        status: 'Đã gửi',
      },
     
    ],
  });
  const handleTabChange = (tabKey) => {
    setActiveTab(tabKey);
  };
  const getEmptyMessage = (tabKey) => {
      const messages = {
        All: "Chưa có thông báo nào",
        Study: "Chưa có thông báo học tập",
        Activity: "Chưa có thông báo hoạt động",
        Tuition: "Chưa có thông báo học phí",
      };
      return messages[tabKey] || "Không có dữ liệu";
    };

  const [searchText, setSearchText] = useState('');
  const handleSearchChange = (text) => {
    setSearchText(text);
  };

  const fitlerSearch = useMemo(() => {
    const list = dataNotifi[activeTab] || [];
    if (!searchText.trim()) return list;

    const searchLower = searchText.toLowerCase();
    
    return list.filter( item =>{
      if (item.title_notifi) {
        return item.title_notifi.toLowerCase().includes(searchLower)
      }
      if (item.title_notifi_tuition) {
        return item.title_notifi_tuition.toLowerCase().includes(searchLower)
      }
      return false;
    });
      
  }, [dataNotifi, activeTab, searchText])
  

  return (
    <NotificationView 
      dataTitleListTabView={dataListTabView}
      activeTab={activeTab}
      onTabChange={handleTabChange}
      dataNotifi={{[activeTab]:fitlerSearch}}
      getEmptyMessage={getEmptyMessage}
      searchText={searchText}
      onSearchChange={handleSearchChange}
    />
  );
};

export default Notification;
