import React, {useState} from 'react';
import {
  Modal,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Image,
  FlatList,
} from 'react-native';
import R from '../../../assets/R';
import PickerItem from '../../../components/Picker/PickerItem';
import Icon from 'react-native-vector-icons/MaterialIcons';
import TextField from '../../../components/Input/TextField';
import TextMulti from '../../../components/Input/TextMulti';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import Button from '../../../components/Button';

const AddWorkModal = ({visible, onClose, onSave}) => {
  const [formData, setFormData] = useState({
    title: '',
    content: '',
    category: null,
    responsible: null,
    deadline: null,
    assignee: null,
    implementer: null,
    attachments: [],
  });

   const [dataList, setDataList] = useState([
                { id: 1, name: 'Nguyễn Minh Đức' },
                { id: 2, name: 'Trần Văn Hùng' },
                { id: 3, name: 'Lê Thị Mai' },
                { id: 4, name: 'Phạm Quốc Khánh' },
                { id: 5, name: 'Hoàng Anh Tuấn' },
                { id: 6, name: 'Vũ Thị Hằng' },
                { id: 7, name: 'Ngô Văn Nam' },
                { id: 8, name: 'Đinh Thị Lan' },
                { id: 9, name: 'Bùi Văn Phúc' },
                { id: 10, name: 'Lý Thị Hoa' },
                { id: 11, name: 'Phan Minh Hoàng' },
                { id: 12, name: 'Tạ Thị Hương' },
                { id: 13, name: 'Đoàn Văn Dũng' },
                { id: 14, name: 'Nguyễn Thị Vân' },
                { id: 15, name: 'Trương Văn Long' },
                { id: 16, name: 'Mai Thị Ngọc' },
                { id: 17, name: 'Huỳnh Quốc Việt' },
                { id: 18, name: 'Lâm Thị Thu' },
                { id: 19, name: 'Nguyễn Hữu Tài' },
                { id: 20, name: 'Phạm Thị Kim' }
              ]);

  const categoryData = [
    {name: 'Công việc theo văn bản', value: 'document'},
    {name: 'Công việc khác', value: 'other'},
  ];
  const items = [
    { id: 1, label: 'Option 1' },
    { id: 2, label: 'Option 2' },
    { id: 3, label: 'Option 3' },
  ];

  const responsibleData = [
    {name: 'Công việc theo văn bản', value: 'document'},
    {name: 'Công việc cá nhân', value: 'personal'},
  ];

  const assigneeData = [
    {name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
    {name: 'Khác', value: 'other'},
  ];

  const implementerData = [
    {name: 'BM255, Nguyễn Minh Đức', value: 'duc'},
    {name: 'Khác', value: 'other'},
  ];

  const handleSave = () => {
    onSave(formData);
    onClose();
  };

  const handleCancel = () => {
    setFormData({
      title: '',
      content: '',
      category: null,
      responsible: null,
      deadline: null,
      assignee: null,
      implementer: null,
      attachments: [],
    });
    onClose();
  };
  const renderItem_1 = ({item, onPress}) => {
    return (
      <View style={styles.chip}>
        <TouchableOpacity style={styles.containerIcon} onPress={onPress}>
          <Image
            resizeMode="cover"
            source={R.images.icCancel}
            style={styles.imageIcon}
            tintColor={R.colors.blue}
          />
        </TouchableOpacity>
        <Text style={styles.textChip}> {`${item.id}, ${item.name}`}</Text>
      </View>
    );
  };
  return (
    <Modal
      visible={visible}
      animationType="slide"
      transparent={true}
      onRequestClose={onClose}>
      <View style={styles.overlay}>
        <View style={styles.modalContainer}>
          <ScrollView showsVerticalScrollIndicator={false}>
            <View style={styles.header}>
              <Text style={styles.headerTitle}>Thêm công việc</Text>
            </View>

            <View style={styles.formContainer}>
              <TextField
                title="Tiêu đề"
                required
                value={formData.title}
                containerMarginBottom={10}
              />

              <TextMulti
                title="Mô tả"
                required
                value={formData.content}
                containerMarginBottom={10}
                fontFamily={R.fonts.fontMedium}
                titleFontSize={R.fontsize.fontSizeContent}
              />

              <View style={styles.containerDropDown}>
                <Text
                  style={[
                    styles.text,
                    {
                      marginBottom: 3,
                      fontSize: R.fontsize.fontSizeLabel,
                      fontFamily: R.fonts.fontMedium,
                      fontWeight: '600',
                      color: R.colors.black,
                    },
                  ]}>
                  Thẻ
                </Text>
                <Dropdown
                  height={35}
                  items={items}
                  placeholder="Công việc theo văn bản"
                  onSelect={item => console.log('Bạn đã chọn:', item)}
                />
              </View>
              <Text style={[styles.text_2, {marginBottom: 3}]}>
                Danh sách thẻ đã chọn
              </Text>
              <FlatList
                data={dataList}
                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
                keyExtractor={(item, index) =>
                  item.id?.toString() || index.toString()
                }
                numColumns={2}
                style={{maxHeight: 150, marginBottom: 10}}
                showsVerticalScrollIndicator={true}
                columnWrapperStyle={styles.flatListSelect}
                nestedScrollEnabled={true}
                scrollEnabled={true}
              />

<View style={styles.containerDropDown}>
                <Text
                  style={[
                    styles.text,
                    {
                      marginBottom: 3,
                      fontSize: R.fontsize.fontSizeLabel,
                      fontFamily: R.fonts.fontMedium,
                      fontWeight: '600',
                      color: R.colors.black,
                    },
                  ]}>
                  Văn bản liên quan
                </Text>
                <Dropdown
                  height={35}
                  items={items}
                  placeholder="Công việc theo văn bản"
                  onSelect={item => console.log('Bạn đã chọn:', item)}
                />
              </View>
              <Text style={[styles.text_2, {marginBottom: 3}]}>
                Danh sách văn bản đã chọn
              </Text>
              <FlatList
                data={dataList}
                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
                keyExtractor={(item, index) =>
                  item.id?.toString() || index.toString()
                }
                numColumns={2}
                style={{maxHeight: 150, marginBottom: 10}}
                showsVerticalScrollIndicator={true}
                columnWrapperStyle={styles.flatListSelect}
                nestedScrollEnabled={true}
                scrollEnabled={true}
              />

<TextField
                title="Ngày đến hạn"
                required
                value={formData.title}
                containerMarginBottom={10}
              />

<View style={styles.containerDropDown}>
                <Text
                  style={[
                    styles.text,
                    {
                      marginBottom: 3,
                      fontSize: R.fontsize.fontSizeLabel,
                      fontFamily: R.fonts.fontMedium,
                      fontWeight: '600',
                      color: R.colors.black,
                    },
                  ]}>
                  Người theo dõi
                </Text>
                <Dropdown
                  height={35}
                  items={items}
                  onSelect={item => console.log('Bạn đã chọn:', item)}
                />
              </View>
              <Text style={[styles.text_2, {marginBottom: 3}]}>
                Danh sách người theo dõi đã chọn
              </Text>
              <FlatList
                data={dataList}
                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
                keyExtractor={(item, index) =>
                  item.id?.toString() || index.toString()
                }
                numColumns={2}
                style={{maxHeight: 150, marginBottom: 10}}
                showsVerticalScrollIndicator={true}
                columnWrapperStyle={styles.flatListSelect}
                nestedScrollEnabled={true}
                scrollEnabled={true}
              />

<View style={styles.containerDropDown}>
                <Text
                  style={[
                    styles.text,
                    {
                      marginBottom: 3,
                      fontSize: R.fontsize.fontSizeLabel,
                      fontFamily: R.fonts.fontMedium,
                      fontWeight: '600',
                      color: R.colors.black,
                    },
                  ]}>
                  Người thực hiện công việc
                </Text>
                <Dropdown
                  height={35}
                  items={items}
                  onSelect={item => console.log('Bạn đã chọn:', item)}
                />
              </View>
              <Text style={[styles.text_2, {marginBottom: 3}]}>
                Danh sách người thực hiện công việc 
              </Text>
              <FlatList
                data={dataList}
                renderItem={({item}) => renderItem_1({item, onPress: () => {}})}
                keyExtractor={(item, index) =>
                  item.id?.toString() || index.toString()
                }
                numColumns={2}
                style={{maxHeight: 150, marginBottom: 10}}
                showsVerticalScrollIndicator={true}
                columnWrapperStyle={styles.flatListSelect}
                nestedScrollEnabled={true}
                scrollEnabled={true}
              />

              {/* Action Buttons */}
            <View style={styles.buttonContainer}>
            <Button
              title="Hủy"
              textColor={R.colors.white}
              onPress={handleCancel}
              backgroundColor={R.colors.orange}
              fontSize={R.sizes.sm}
              fontFamily={R.fonts.fontMedium}
              height={35}
              width={100}
              containerStyle={{paddingHorizontal: 15, borderRadius: 30}}
            />
                <Button
              title="Thêm mới"
              textColor={R.colors.white}
              onPress={handleSave}
              backgroundColor={R.colors.blue}
              fontSize={R.sizes.sm}
              fontFamily={R.fonts.fontMedium}
              height={35}
              width={100}
              containerStyle={{paddingHorizontal: 15, borderRadius: 30}}
            />
            </View>
            </View>

            
          </ScrollView>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: R.colors.blackShadow,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    backgroundColor: 'white',
    borderRadius: 15,
    maxHeight: '70%',
    paddingVertical: 20,
    marginHorizontal: 15,
  },
  header: {
    alignItems: 'center',
    paddingBottom: 20,
    marginHorizontal: 20,
  },
  headerTitle: {
    fontSize: R.fontsize.fontsSizeTitle,
    fontFamily: R.fonts.fontMedium,
    fontWeight: '600',
    color: R.colors.blue,
  },
  formContainer: {
    paddingHorizontal: 20,
  },
  fieldContainer: {
    marginBottom: 20,
  },
  containerDropDown:{
    marginBottom:10
},
imageIcon:{
    width: 15,
    height: 15,
},
  label: {
    fontSize: R.fontsize.fontSizeLabel,
    fontFamily: R.fonts.fontMedium,
    fontWeight: '600',
    color: R.colors.black,
  },
  required: {
    color: 'red',
  },
  textInput: {
    borderWidth: 1,
    borderColor: R.colors.grayBorderInputTextHeader,
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  textArea: {
    height: 80,
    textAlignVertical: 'top',
  },
  flatListSelect:{
    flexDirection:'row',
    flexWrap:'wrap',
  },
  textChip:{
    fontSize: R.fontsize.fontSizeContent,
    fontWeight: '400',
    fontFamily:R.fonts.fontRegular,
    color:R.colors.blueTextChip,
  },
  text_2:{
    fontSize: R.fontsize.fontSizeContent,
    fontFamily: R.fonts.fontMedium,
    fontWeight: '600',
    color: R.colors.black,
  },
  pickerContainer: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    backgroundColor: 'white',
  },
  datePickerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: 'white',
  },
  datePickerText: {
    fontSize: 14,
    color: '#666',
  },
  containerIcon:{
    marginRight:2
  },
  fileUploadContainer: {
    borderWidth: 2,
    borderColor: '#ddd',
    borderStyle: 'dashed',
    borderRadius: 8,
    paddingVertical: 30,
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
  },
  fileUploadText: {
    marginTop: 8,
    fontSize: 14,
    color: R.colors.blue,
    fontWeight: '500',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingHorizontal: 20,
    paddingTop: 20,
    gap: 10,
  },
  cancelButton: {
    flex: 1,
    justifyContent:'center',
    backgroundColor: R.colors.orange,
    alignItems: 'center',
  },
  cancelButtonText: {
    fontSize: 16,
    color: '#666',
    fontWeight: '500',
  },
  saveButton: {
    flex: 1,
    paddingVertical: 12,
    borderRadius: 8,
    backgroundColor: R.colors.blue,
    alignItems: 'center',
  },
  saveButtonText: {
    fontSize: 16,
    color: 'white',
    fontWeight: '500',
  },
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    // position: 'relative',
    paddingLeft: 10,
    paddingRight:10,
    height: 25,
    borderRadius: 10,
    marginBottom:10,
    marginRight:5,
    backgroundColor: R.colors.blue2,
    alignSelf:'flex-start'
  },
});

export default AddWorkModal;
