import React, {useState} from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  FlatList,
} from 'react-native';
import styles from './style';
import FAB from '../../../components/FAB/fab';
import SubButton from '../../../components/FAB/sub_button';
import R from '../../../assets/R';
import Header from '../../../components/Header/Header';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import WorkReportModal from '../detail/modal_add_report';
import EditReportModal from '../detail/modal_edit_report';
const DetailListWorkView = props => {
  const {data, dataList} = props;
  const [showWorkReportModal, setShowWorkReportModal] = useState(false);
  const [showEditReportModal, setShowEditReportModal] = useState(false);
  const getColor = status => {
    switch (status) {
      case 'Chờ duyệt':
        return R.colors.blue;
      case 'Hoàn thành':
        return R.colors.green;
      case 'Cần chỉnh sửa':
        return R.colors.orange;
      case 'Đang thực hiện':
        return R.colors.orange;
      case 'Chờ báo cáo':
        return R.colors.blue;
      default:
        return R.colors.gray;
    }
  };

  const renderView = () => {
    return (
      <View style={styles.body}>
        <Text style={[styles.text, {fontSize: R.fontsize.fontSizeSubTitle ,}]}>
          {data.title}
        </Text>
        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
          <Text style={styles.text}>
            Thời hạn: <Text style={styles.sub_text}>{data.deadline}</Text>
          </Text>
          <Text style={styles.text}>
            Trạng thái:{' '}
            <Text style={{color: getColor(data.status)}}>{data.status}</Text>
          </Text>
        </View>
        <Text style={styles.text}>
          Công việc thuộc văn bản:
          <Text style={[styles.sub_text, {color: R.colors.blue}]}>
            {data.document}
          </Text>
        </Text>
        <Text style={styles.text}>
          Người giám sát:
          <Text style={styles.sub_text}>
            {data.supervisor.map(item => item.name).join(', ')}
          </Text>
        </Text>
        <Text style={styles.text}>
          Người thực hiện:
          <Text style={styles.sub_text}>
            {data.implementer.map(item => item.name).join(', ')}
          </Text>
        </Text>
        <Text style={styles.text}>Nội dung công việc:</Text>
        <View style={styles.containerContent}>
          <Text style={[styles.text, {color: R.colors.gray}]}>
            {data.content}
          </Text>
        </View>
        <Text style={styles.text}>Tài liệu đính kèm</Text>
        <TouchableOpacity style={styles.containerFile}>
          <Text style={styles.text}>
            Quyết định thông báo đào tạo - QD347583
          </Text>
          <Image source={R.images.icDownload} style={styles.image} />
        </TouchableOpacity>

        <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="Chọn tùy chọn"
            onSelect={item => console.log('Bạn đã chọn:', item)}
          />
        </View>
        <Text style={[styles.text, {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={false}
          columnWrapperStyle={styles.flatListSelect}
          nestedScrollEnabled={true}
          scrollEnabled={true}
        />
      </View>
    );
  };

  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>
    );
  };

  const handleReportPress = () => {
    if (data.status === 'Chờ báo cáo') {
      setShowWorkReportModal(true);
    } else if (data.status === 'Chờ duyệt') {
      setShowEditReportModal(true);
    } else if (data.status === 'Cần chỉnh sửa') {
      setShowWorkReportModal(true);
    } else if (data.status === 'Đang thực hiện') {
      setShowWorkReportModal(true);
    }
  };

  const handleWorkReportSubmit = (reportContent) => {
    console.log('Work report submitted:', reportContent);
  };

  const handleEditReportSubmit = (reportContent) => {
    console.log('Edit report submitted:', reportContent);
  };

  const shouldShowFAB = () => {
    return data.status !== 'Hoàn thành';
  };

  return (
    <View style={styles.container}>
      <Header title={'Chi tiết công việc'} isBack />
      {renderView(data)}
      {shouldShowFAB() && (
        <FAB>
          <SubButton
            onPress={handleReportPress}
            label={data.status === 'Chờ duyệt' ? 'Sửa báo cáo' : 'Báo cáo'}
            images={R.images.icEdit}
            backgroundColor={R.colors.orange}
          />
        </FAB>
      )}
      
      <WorkReportModal
        visible={showWorkReportModal}
        onClose={() => setShowWorkReportModal(false)}
        onSubmit={handleWorkReportSubmit}
      />
      
      <EditReportModal
        visible={showEditReportModal}
        onClose={() => setShowEditReportModal(false)}
        onSubmit={handleEditReportSubmit}
        initialContent=""
      />
    </View>
  );
};

export default DetailListWorkView;
