schedule.jsx

import { View, Text, FlatList, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import React, { useState, useEffect } from 'react';
import { styles, buttonStyles } from "./styles";
const scheduleData = [
  { id: '1', time: '2024-09-17T08:00:00', patient: 'Nguyễn Văn A', service: 'face', notes: 'Khám tổng quát' },
  { id: '2', time: '2024-09-17T10:30:00', patient: 'Trần Thị B', service: 'face', notes: 'Kiểm tra huyết áp' },
  { id: '3', time: '2024-09-18T11:00:00', patient: 'Lê Văn C', service: 'face', notes: 'Khám tai mũi họng' },
  { id: '4', time: '2024-09-18T14:00:00', patient: 'Phạm Văn D', service: 'face', notes: 'Khám mắt' },
  { id: '5', time: '2024-09-19T16:00:00', patient: 'Nguyễn Thị E', service: 'face', notes: 'Kiểm tra tim mạch' },
];
const weekDays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

export default function schedule() {

  const [search, setSearch] = useState('');
  const [filteredData, setFilteredData] = useState(scheduleData);
  const [weekOffset, setWeekOffset] = useState(0); // Offset for weeks
  const [selectedDate, setSelectedDate] = useState(null); // Selected date state
  const [statusFilter, setStatusFilter] = useState(false); // Status filter state
  const [selectedStatus, setSelectedStatus] = useState('incomplete');

  useEffect(() => {
    filterByDate(new Date(), statusFilter);
  }, []);

  const handleSearch = (text) => {
    setSearch(text);
    if (text) {
      const filtered = scheduleData.filter((item) =>
        item.patient.toLowerCase().includes(text.toLowerCase())
      );
      setFilteredData(filtered);
    } else {
      filterByDate(selectedDate, statusFilter); // Re-apply date filter
    }
  };

  const getWeekDates = () => {
    const currentDate = new Date();
    currentDate.setDate(currentDate.getDate() + weekOffset * 7);
    const startOfWeek = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1));
    const dates = [];

    for (let i = 0; i < 7; i++) {
      const day = new Date(startOfWeek);
      day.setDate(startOfWeek.getDate() + i);
      dates.push(day);
    }
    return dates;
  };

  const filterByDate = (date, status) => {
    let filtered = scheduleData;
    if (date) {
      filtered = filtered.filter((item) => {
        const itemDate = new Date(item.time);
        return (
          itemDate.getDate() === date.getDate() &&
          itemDate.getMonth() === date.getMonth() &&
          itemDate.getFullYear() === date.getFullYear()
        );
      });
    }
    if (status !== null) {
      filtered = filtered.filter((item) => item.completed === status);
    }
    setFilteredData(filtered);
  };

  const handleDatePress = (date) => {
    setSelectedDate(date);
    filterByDate(date, statusFilter);
  };

  const hanldeStatusFilter = (status) => {
    setStatusFilter(status);
    setSelectedStatus(status ? 'complete' : 'incomplete');
    filterByDate(selectedDate, status);
  }

  const renderScheduleItem = ({ item }) => (
    <View style={styles.scheduleItem}>
      <View style={styles.infoRow}>
        <Text style={styles.labelText}>Patient:</Text>
        <Text style={styles.valueText}>{item.patient}</Text>
      </View>
      <View style={styles.infoRow}>
        <Text style={styles.labelText}>Service:</Text>
        <Text style={styles.valueText}>{item.service}</Text>
      </View>
      <View style={styles.infoRow}>
        <Text style={styles.labelText}>Date:</Text>
        <Text style={styles.valueText}>{item.time}</Text>
      </View>
      <View style={styles.infoRow}>
        <Text style={styles.labelText}>Patient Details:</Text>
        <TouchableOpacity
          style={styles.viewDetailsButton}
          onPress={() => navigation.navigate('Detail', { item })}
        >
          <Text style={styles.buttonText}>View</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Appointment </Text>
        <TextInput
          style={styles.searchBar}
          placeholder="Search..."
          value={search}
          onChangeText={handleSearch}
        />
      </View>

      {/* Week navigation */}
      <View style={styles.weekContainer}>
        <TouchableOpacity onPress={() => setWeekOffset(weekOffset - 1)}>
          <Text style={styles.weekNavButton}>{'<'}</Text>
        </TouchableOpacity>
        {getWeekDates().map((date, index) => (
          <TouchableOpacity
            key={index}
            style={styles.dayContainer}
            onPress={() => handleDatePress(date)}
          >
            <Text
              style={[
                styles.dayText,
                selectedDate?.toDateString() === date.toDateString() && styles.selectedDayText
              ]}
            >
              {weekDays[index]}
            </Text>
            <Text
              style={[
                styles.dateText,
                selectedDate?.toDateString() === date.toDateString() && styles.selectedDateText
              ]}
            >
              {date.getDate()}
            </Text>
          </TouchableOpacity>
        ))}

        <TouchableOpacity onPress={() => setWeekOffset(weekOffset + 1)}>
          <Text style={styles.weekNavButton}>{'>'}</Text>
        </TouchableOpacity>
      </View>

      {/* thanh lọc */}
      <View style={styles.statusFilterContainer}>
        <TouchableOpacity
          style={[
            styles.statusButton,
            statusFilter === false && styles.selectedStatusButton
          ]}
          onPress={() => hanldeStatusFilter(false)}
        >
          <Text style={styles.statusText}>Incomplete</Text>
          {selectedStatus === 'incomplete' && <View style={styles.underline} />}
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.statusButton,
            statusFilter === true && styles.selectedStatusButton
          ]}
          onPress={() => hanldeStatusFilter(true)}
        >
          <Text style={styles.statusText}>Complete</Text>
          {selectedStatus === 'complete' && <View style={styles.underline} />}
        </TouchableOpacity>
      </View>

      <FlatList
        data={filteredData}
        renderItem={renderScheduleItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  )
}