import React, {useState} from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  Image,
  FlatList,
  ScrollView,
  LogBox,
} 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 Button from '../../../components/Button';
import ModalRequestReport from './modal_request_report';
import ModalRequestEditReport from './modal_request_edit_report';

const DetailListWorkMonitoringView = props => {
  LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
  const {
    data,
    dataList,
    dataReport,

    onOpenModalRequestReport,
    showModalRequestReport,
    onCloseModalRequestReport,
    onSubmitRequestReport,

    onOpenModalRequestEditReport,
    showModalRequestEditReport,
    onCloseModalRequestEditReport,
    onSubmitRequestEditReport,
  } = props;

  const getColor = status => {
    switch (status) {
      case 'Chờ duyệt':
        return R.colors.blue;
      case 'Hoàn thành':
        return R.colors.green;
      case 'Đợi chỉnh sửa':
        return R.colors.orange;
      case 'Đang thực hiện':
        return R.colors.orange;
      case 'Đợi báo cáo':
        return R.colors.blue;
      default:
        return R.colors.gray;
    }
  };

  const shouldShowFilterStatus = () => {
    return data.status === 'Đang thực hiện';
  };

  const renderItem_1 = ({item, onPress}) => {
    return (
      <View style={styles.chip}>
        <TouchableOpacity
          style={styles.containerIcon}
          onPress={() => handleItemPress(item)}>
          <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 renderButton = () => {
    return (
      <View style={styles.btnRegister2}>
        <Button
          title={'Cập nhật thông tin công việc'}
          backgroundColor={R.colors.blue}
          textColor={R.colors.white}
          onPress={() => ({})}
          fontSize={R.sizes.sm}
          fontFamily={R.fonts.fontMedium}
          height={35}
          containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
        />
      </View>
    );
  };

  const renderButtonDownloadDoc = () => {
    return (
      <TouchableOpacity style={styles.attachmentContainer}>
        <Image source={R.images.icDocument} style={styles.uploadIcon} />
        <Text style={styles.attachmentText}>Thêm tài liệu</Text>
      </TouchableOpacity>
    );
  };

  const renderListReport = () => {
    const reports = dataReport?.userSend ?? [];
    const responders = reports.flatMap(r => r?.responder ?? []);
    return (
      <View>
        <Text
          style={[
            styles.text,
            {
              color: R.colors.blue,
              fontFamily: R.fonts.fontMedium,
              fontSize: R.fontsize.fontSizeSubTitle,
            },
          ]}>
          Báo cáo công việc
        </Text>
        <Text style={[styles.text, {color: R.colors.blue}]}>
          {reports.map(item => item.title).join(', ')} -{' '}
          {reports.map(item => item.time).join(', ')}{' '}
          {reports.map(item => item.date).join(', ')}
        </Text>
        <View style={styles.cardContent}>
          <Text style={[styles.text]}>
            {responders.map(item => item.name).join(', ')} -{' '}
            {responders.map(item => item.time).join(', ')}{' '}
            {responders.map(item => item.date).join(', ')}
          </Text>
          <View style={styles.containerContent}>
            <Text style={[styles.text, {color: R.colors.gray4}]}>
              {responders.map(item => item.content).join(', ')}
            </Text>
          </View>
          <TouchableOpacity style={styles.containerFile}>
            <Text style={[styles.text, {fontSize: R.sizes.xs}]}>
              Quyết định thông báo đào tạo - QD347583
            </Text>
            <Image source={R.images.icDownload} style={styles.image} />
          </TouchableOpacity>
          <View style={{flexDirection: 'row', justifyContent:'flex-end'}}>
            <Button
              title="Yêu cầu chỉnh sửa"
              backgroundColor={R.colors.orange}
              textColor={R.colors.white}
              onPress={()=>{
                console.log('Yêu cầu chỉnh sửa');
                onOpenModalRequestEditReport();
                
              }}
              fontSize={R.sizes.sm}
              fontFamily={R.fonts.fontMedium}
              height={30}
              containerStyle={{paddingHorizontal: 15, borderRadius: 25, marginRight: 5}}
            />
            <Button
              title="Phê duyệt"
              backgroundColor={R.colors.blue}
              textColor={R.colors.white}
              onPress={() => ({})}
              fontSize={R.sizes.sm}
              fontFamily={R.fonts.fontMedium}
              height={30}
              containerStyle={{paddingHorizontal: 15, borderRadius: 25}}
            />
          </View>
        </View>
      </View>
    );
  };

  const renderBody = item => {
    return (
      <View style={styles.body}>
        <Text
          style={[
            styles.text,
            {fontSize: R.fontsize.fontSizeSubTitle, marginBottom: 3},
          ]}>
          {data.title}
        </Text>

        <Text style={[styles.text, {marginBottom: 3, textAlign: 'right'}]}>
          Trạng thái:{' '}
          <Text style={{color: getColor(data.status)}}>{data.status}</Text>
        </Text>
        <Text style={[styles.text, {marginBottom: 3}]}>
          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, {marginBottom: 3}]}>Nội dung công việc</Text>
        <View style={styles.containerContent}>
          <Text style={[styles.text, {color: R.colors.gray4}]}>
            {data.content}
          </Text>
        </View>
        <Text style={styles.text}>
          Ngày đến hạn <Text style={{color: R.colors.red}}>*</Text>
        </Text>
        <View style={styles.containerContent}>
          <Text style={styles.text}>{data.deadline}</Text>
        </View>

        <View style={styles.containerDropDown}>
          <Text
            style={[
              styles.text,
              {
                marginBottom: 3,
              },
            ]}>
            Người theo dõi
          </Text>
          <Dropdown
            height={35}
            items={item}
            placeholder="Công việc theo văn bản"
          />
        </View>
        <Text style={[styles.text, {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}}
          showsVerticalScrollIndicator={true}
          columnWrapperStyle={styles.flatListSelect}
          nestedScrollEnabled={true}
          scrollEnabled={true}
        />

        <View style={styles.containerDropDown}>
          <Text
            style={[
              styles.text,
              {
                marginBottom: 3,
              },
            ]}>
            Người thực hiện công việc
          </Text>
          <Dropdown height={35} items={item} />
        </View>
        <Text style={[styles.text, {marginBottom: 3}]}>
          Danh sách người thực hiện công việc đã 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}}
          showsVerticalScrollIndicator={true}
          columnWrapperStyle={styles.flatListSelect}
          nestedScrollEnabled={true}
          scrollEnabled={true}
        />

        <View style={styles.containerDropDown}>
          <Text
            style={[
              styles.text,
              {
                marginBottom: 3,
              },
            ]}>
            Thẻ
          </Text>
          <Dropdown height={35} items={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}}
          showsVerticalScrollIndicator={true}
          columnWrapperStyle={styles.flatListSelect}
          nestedScrollEnabled={true}
          scrollEnabled={true}
        />

        <Text style={[styles.text, {marginBottom: 3}]}>Tài liệu đính kèm</Text>
        <TouchableOpacity style={styles.containerFile}>
          <Text style={[styles.text, {fontSize: R.sizes.xs}]}>
            Quyết định thông báo đào tạo - QD347583
          </Text>
          <Image source={R.images.icDownload} style={styles.image} />
        </TouchableOpacity>
        {shouldShowFilterStatus() && renderButtonDownloadDoc()}
        {shouldShowFilterStatus() && renderButton()}
        {!shouldShowFilterStatus() && renderListReport()}
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <Header title={'Chi tiết công việc giám sát'} isBack={true} />
      <ScrollView showsVerticalScrollIndicator={false}>
        {renderBody()}
      </ScrollView>

      {shouldShowFilterStatus() && (
        <FAB>
          <SubButton
            onPress={onOpenModalRequestReport}
            label={'Yêu cầu báo cáo'}
            images={R.images.icEdit}
            backgroundColor={R.colors.orange}
          />
        </FAB>
      )}

      <ModalRequestReport
        visible={showModalRequestReport}
        onClose={onCloseModalRequestReport}
        onSubmitReport={onSubmitRequestReport}
        workData={data}
      />

      <ModalRequestEditReport
        visible={showModalRequestEditReport}
        onClose={onCloseModalRequestEditReport}
        onSubmitReport={onSubmitRequestEditReport}
      />
    </View>
  );
};

export default DetailListWorkMonitoringView;
