import React, {useEffect} from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  FlatList,
  Alert,
} from 'react-native';
import R from '../../../assets/R';
import styles from './style';
import Header from '../../../components/Header/Header';
import TextMulti from '../../../components/Input/TextMulti';
import FAB from '../../../components/FAB/fab';
import SubButton from '../../../components/FAB/sub_button';
const DetailIncomingDocumentView = props => {
  const {icomingDocument} = props;
  console.log(props);
  const getColor = status => {
    switch (status) {
      case 'Hạn chế':
        return R.colors.brown;
      case 'Công khai':
        return R.colors.blue;
    }
  };
  const renderItem = ({item}) => {
    console.log(item);
    return (
      <View style={{marginVertical: 7.5}}>
        <View style={{flexDirection: 'row', marginBottom: 5}}>
          <Text style={styles.text}>{item.author} - </Text>
          <Text style={styles.text}>{item.code} </Text>
          <Text style={styles.text}>{item.time} </Text>
          <Text style={styles.text}>{item.date}</Text>
        </View>
        <View style={styles.containerContent}>
          <Text style={styles.text_2}>{item.content}</Text>
        </View>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <Header title={'Văn bản 2038475'} isBack />
      <View style={{flex: 1}}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.body}>
            <Text style={styles.textSubTitle}>{icomingDocument.title}</Text>
            <View style={{marginTop: 5}}></View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: 5,
              }}>
              <Text style={styles.text_1}>
                Văn bản hiện có {icomingDocument.total_head_of_work} công việc
                liên {'\n'}quan
              </Text>
              <Text style={styles.text}>
                Chế độ:
                <Text
                  style={{
                    fontWeight: '600',
                    fontFamily: R.fonts.fontMedium,
                    fontSize: R.fontsize.fontSizeContent,
                    color: getColor(icomingDocument.status),
                  }}>
                  {icomingDocument.status}
                </Text>
              </Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginBottom: 5,
              }}>
              <Text style={styles.text}>
                Số ký hiệu:
                <Text style={styles.text_2}>
                  {icomingDocument.symbol_number}
                </Text>
              </Text>
              <Text style={styles.text}>
                Số vào sổ:
                <Text style={styles.text_2}>
                  {icomingDocument.number_entry_book}
                </Text>
              </Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginBottom: 5,
              }}>
              <Text style={styles.text}>
                Ngày đến:
                <Text style={styles.text_2}>{icomingDocument.term}</Text>
              </Text>
              <Text style={styles.text}>
                Ngày văn bản:
                <Text style={styles.text_2}>
                  {icomingDocument.term_display}
                </Text>
              </Text>
            </View>
            <Text style={[styles.text, {marginBottom: 5}]}>
              Loại văn bản:
              <Text style={styles.text_2}>{icomingDocument.document_type}</Text>
            </Text>
            <Text style={[styles.text, {marginBottom: 5}]}>
              Lĩnh vực văn bản:
              <Text style={styles.text_2}>{icomingDocument.field}</Text>
            </Text>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginBottom: 5,
              }}>
              <Text style={styles.text}>
                Người ký:
                <Text style={styles.text_2}>{icomingDocument.signer_name}</Text>
              </Text>
              <Text style={styles.text}>
                Đối tác gửi:
                <Text style={styles.text_2}>
                  {icomingDocument.sender_partner}
                </Text>
              </Text>
            </View>
            <TextMulti title="Ghi chú" />
            <View style={{marginTop: 5}}></View>
            <Text style={[styles.text, {marginBottom: 3}]}>Nội dung</Text>
            <View style={[styles.containerContent, {marginBottom: 5}]}>
              <Text style={styles.text_2}>{icomingDocument.content}</Text>
            </View>
            <Text style={[styles.text, {marginBottom: 5}]}>
              Ý kiến của BGH:
              <Text style={styles.text_2}>{icomingDocument.opinion_bgh}</Text>
            </Text>
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                alignItems: 'center',
                marginBottom: 5,
              }}>
              <Text style={styles.text}>Phòng ban nhận :</Text>
              {icomingDocument.received_departments.map((item, index) => {
                return (
                  <View style={styles.card}>
                    <Text style={{color: R.colors.white}} key={index}>
                      {item.name}
                    </Text>
                  </View>
                );
              })}
            </View>
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                alignItems: 'center',
                marginBottom: 5,
              }}>
              <Text style={styles.text}>Nhóm nhận :</Text>
              {icomingDocument.received_group.map((item, index) => {
                return (
                  <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
                    <Text style={{color: R.colors.white}} key={index}>
                      {item.name}
                    </Text>
                  </View>
                );
              })}
            </View>

            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                alignItems: 'center',
                marginBottom: 5,
              }}>
              <Text style={styles.text}>Người nhận :</Text>
              {icomingDocument.receiver.map((item, index) => {
                return (
                  <View style={[styles.card, {backgroundColor: R.colors.blue}]}>
                    <Text style={{color: R.colors.white}} key={index}>
                      {item.name}
                    </Text>
                  </View>
                );
              })}
            </View>

            <Text style={[styles.text, {color: R.colors.blue}]}>
              Tài liệu đính kèm
            </Text>

            <TouchableOpacity style={styles.containerBtn}>
              <Text style={styles.textBtn}>
                Quyết định thông báo đào tạo - QD347583
              </Text>
              <Image
                source={R.images.icDownload}
                style={{width: 20, height: 20}}
                resizeMode="contain"
                tintColor={R.colors.blue}
              />
            </TouchableOpacity>

            <Text style={[styles.text, {color: R.colors.blue}]}>
              Bút phê văn bản
            </Text>

            <FlatList
              data={icomingDocument.approvals}
              renderItem={renderItem}
              keyExtractor={(item, index) => index.toString()}
            />
          </View>
        </ScrollView>

        <View style={{marginHorizontal: 15}}>
          <FAB>
            <SubButton
              onPress={() => Alert.alert('Pressed 1!')}
              label="Thêm bút phê"
              images={R.images.icEdit}
              backgroundColor={R.colors.orange}
            />
            <SubButton
              onPress={() => Alert.alert('Pressed 2!')}
              label="Tạo công việc"
              images={R.images.icMenuEdit}
              backgroundColor={R.colors.blue}
            />
          </FAB>
        </View>
      </View>
    </View>
  );
};

export default DetailIncomingDocumentView;
