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

const ListStudent = (props) => {
    const [searchText, setSearchText] = useState('');
    const handleSearchChange = (text) => {
      setSearchText(text);
    };
    const filter = useMemo(()=>{
      if(!searchText.trim()) return dataListStudent;
      return dataListStudent.filter(item => item.name.toLowerCase().includes(searchText.toLowerCase()));
    },[dataListStudent, searchText]);

    const [dataListStudent, setDataListStudent]= useState([
      {
        id:'1',
        name:'Nguyễn Minh Đức',
        status:'Đang học',
        gender:'Nam',
        code_student:'259128',
        date_student:'23/10/2004',
        tele_phone:'0987654321',
      },
      {
        id:'2',
        name:'Bùi Thanh Ngọc',
        status:'Cảnh cáo',
        gender:'Nữ',
        code_student:'259128',
        date_student:'23/10/2004',
        tele_phone:'0987654321',
      },
      {
        id:'3',
        name:'Trần Văn Hùng',
        status:'Thôi học',
        gender:'Nam',
        code_student:'259128',
        date_student:'23/10/2004',
        tele_phone:'0987654321',
      },
    ])
    const getStatusColor = (status)=>{
      const statusColor ={
        'Đang học': '#4CAF50',
        'Cảnh cáo': '#FFC107',
        'Thôi học': '#F44336',
      }
      return statusColor[status] || '#9E9E9E';
    }
    const statusStats = useMemo(()=>{
      const stats = dataListStudent.reduce((acc, student)=>{
        acc[student.status] =(acc[student.status] || 0 ) + 1;
        return acc;
      },{});

      return Object.entries(stats).map(([status, count]) =>({
        status,
        count,
        color: getStatusColor(status),
      }));
    },[dataListStudent]);
    
  return (
    <ListStudentView 
    searchText={searchText}
    onSearchChange={handleSearchChange}
    filter={dataListStudent}
    statusStats={statusStats}
    />
  );
};

export default ListStudent;
