ManageWorkScheduleScreen

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity, Modal, Button, TextInput } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useNavigation } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';

const WorkScheduleCard = ({ schedule, onView, onDelete }) => {
  return (
    <View style={styles.card}>
      <Text style={styles.scheduleInfo}>Doctor ID: {schedule.doctorID}</Text>
      <Text style={styles.scheduleInfo}>Date: {schedule.date_of_week}</Text>
      <Text style={styles.scheduleInfo}>Time: {schedule.start_time} - {schedule.end_time}</Text>
      <Text style={styles.scheduleInfo}>Status: {schedule.status}</Text>
      <TouchableOpacity onPress={() => onView(schedule)} style={styles.viewButton}>
        <Text style={styles.viewButtonText}>View</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onDelete(schedule)} style={styles.deleteButton}>
        <Text style={styles.deleteButtonText}>Delete</Text>
      </TouchableOpacity>
    </View>
  );
};

const ManageWorkScheduleScreen = () => {
  const navigation = useNavigation();
  const [schedules, setSchedules] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedSchedule, setSelectedSchedule] = useState(null);
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [updateModalVisible, setUpdateModalVisible] = useState(false);
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [scheduleToDelete, setScheduleToDelete] = useState(null);
  const [newSchedule, setNewSchedule] = useState({
    date_of_week: '',
    doctorID: '',
    start_time: '',
    end_time: '',
    status: 'Available',
  });
  const [updatedSchedule, setUpdatedSchedule] = useState(null);

  useEffect(() => {
    const initialSchedules = [
      {
        workID: '1',
        doctorID: 'D001',
        date_of_week: 'Monday',
        start_time: '09:00',
        end_time: '12:00',
        status: 'Available',
      },
      {
        workID: '2',
        doctorID: 'D002',
        date_of_week: 'Tuesday',
        start_time: '10:00',
        end_time: '13:00',
        status: 'Unavailable',
      },
      {
        workID: '3',
        doctorID: 'D003',
        date_of_week: 'Wednesday',
        start_time: '08:00',
        end_time: '11:00',
        status: 'Available',
      },
    ];

    setSchedules(initialSchedules);
    setLoading(false);
  }, []);

  const handleViewSchedule = (schedule) => {
    setSelectedSchedule(schedule);
  };

  const handleAddSchedule = () => {
    const newWorkID = (schedules.length + 1).toString();
    const scheduleToAdd = { ...newSchedule, workID: newWorkID };
    setSchedules([...schedules, scheduleToAdd]);
    setCreateModalVisible(false);
    setNewSchedule({ date_of_week: '', doctorID: '', start_time: '', end_time: '', status: 'Available' });
  };

  const handleUpdateSchedule = () => {
    const updatedSchedules = schedules.map(schedule =>
      schedule.workID === updatedSchedule.workID ? updatedSchedule : schedule
    );
    setSchedules(updatedSchedules);
    setUpdateModalVisible(false);
    setUpdatedSchedule(null);
  };

  const handleDeleteSchedule = () => {
    setSchedules(schedules.filter(schedule => schedule.workID !== scheduleToDelete.workID));
    setDeleteModalVisible(false);
    setScheduleToDelete(null);
  };

  const renderItem = ({ item }) => (
    <WorkScheduleCard
      schedule={item}
      onView={handleViewSchedule}
      onDelete={(schedule) => {
        setScheduleToDelete(schedule);
        setDeleteModalVisible(true);
      }}
    />
  );

  if (loading) {
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={() => navigation.goBack()}>
          <Ionicons name="arrow-back" size={24} color="#fff" />
        </TouchableOpacity>
        <Text style={styles.headerText}>Work Schedules</Text>
        <TouchableOpacity style={styles.createButton} onPress={() => setCreateModalVisible(true)}>
          <Text style={styles.createButtonText}>Create</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={schedules}
        renderItem={renderItem}
        keyExtractor={(item) => item.workID}
        contentContainerStyle={styles.list}
      />

      {/* Modal thêm lịch làm việc */}
      <Modal
        visible={createModalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setCreateModalVisible(false)}
      >
        {/* Modal thêm nội dung */}
      </Modal>

      {/* Modal chi tiết lịch làm việc */}
      <Modal
        visible={selectedSchedule !== null}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setSelectedSchedule(null)}
      >
        {/* Modal chi tiết nội dung */}
      </Modal>

      {/* Modal cập nhật lịch làm việc */}
      <Modal
        visible={updateModalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setUpdateModalVisible(false)}
      >
        {/* Modal cập nhật nội dung */}
      </Modal>

      {/* Modal xác nhận xóa */}
      <Modal
        visible={deleteModalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setDeleteModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text>Bạn có chắc muốn xóa lịch làm việc này không?</Text>
            <View style={styles.buttonContainer}>
              <Button title="Xóa" onPress={handleDeleteSchedule} color="#dc3545" />
              <Button title="Hủy" onPress={() => setDeleteModalVisible(false)} color="#6c757d" />
            </View>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f8f9fa',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  backButton: {
    backgroundColor: '#DDDDDD',
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 4,
    marginRight: 5,
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  createButton: {
    padding: 8,
    backgroundColor: '#28a745',
    borderRadius: 5,
  },
  createButtonText: {
    color: '#fff',
  },
  list: {
    paddingBottom: 16,
  },
  card: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
    marginBottom: 15,
    padding: 15,
    backgroundColor: '#ffffff',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },
  scheduleInfo: {
    fontSize: 16,
    marginBottom: 4,
  },
  viewButton: {
    marginTop: 8,
    padding: 8,
    backgroundColor: '#007bff',
    borderRadius: 5,
  },
  viewButtonText: {
    color: '#fff',
  },
  deleteButton: {
    marginTop: 8,
    padding: 8,
    backgroundColor: '#dc3545',
    borderRadius: 5,
  },
  deleteButtonText: {
    color: '#fff',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    width: '80%',
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 16,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

export default ManageWorkScheduleScreen;