import React, {useState} from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  TextInput,
  FlatList,
} from 'react-native';
import styles from './style';
import FAB from '../../components/FAB/fab';
import SubButton from '../../components/FAB/sub_button';
import Header from '../../components/Header/Header';
import Dropdown from '../../components/DropdownAlert/Dropdown';
import R from '../../assets/R';
import TabViewComponent from '../../components/TabView';
import AddWorkModal from '../list_work/modal_add/index';
import Button from '../../components/Button';
import * as ScreenName from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';

const ListWorkView = props => {
  const {searchQuery, setSearchQuery, dataList} = props;
  
  const navigation = useNavigation();

  const [modalVisible, setModalVisible] = useState(false);

  const handleFilterChange = item => {
    console.log(item);
  };

  const handleAddWork = () => {
    setModalVisible(true);
  };

  const handleSaveWork = workData => {
    console.log('Saving work:', workData);
  };

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

  const renderTabView = ( ) => {
    return (
      <TabViewComponent
        data={[
          {key: 'all', label: 'Tất cả'},
          {key: 'public', label: 'Công khai'},
          {key: 'private', label: 'Hạn chế'},
          {key: 'draft', label: 'Nháp'},
        ]}
        tabStyle={{
          backgroundColor: R.colors.gray,
          marginHorizontal: 5,
          borderRadius: 10,
          width: 100,
          height: 35,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        style={{
          marginVertical: 5,
        }}
        mode="filter"
        defaultActiveKey="all"
        scrollable={true}
        activeTabStyle={{
          backgroundColor: R.colors.blue,
        }}
        textStyle={{
          color: R.colors.white,
          fontWeight: '400',
          fontFamily: R.fonts.fontRegular,
          fontSize: R.fontsize.fontSizeContent,
        }}
        showActiveIndicator={false}
        onFilterChange={handleFilterChange}
      />
    );
  };

  const renderListView = ( {item} ) =>{
    return(
      <View style={{ marginHorizontal:15, marginVertical:10}}>
      <View style ={{backgroundColor: getColor(item.status),borderTopLeftRadius:15, borderTopRightRadius:15}}>
       <Text style={[styles.subText , {marginHorizontal:15, fontFamily: R.fonts.fontMedium, fontWeight: '600', color: R.colors.white,}]}>{item.status}</Text>
   </View>
      <View style={styles.containerCard}>
       
        <Text style={styles.text }>{item.title}</Text>
        <View style={{flexDirection: 'row', justifyContent: 'space-between' }}>
          <Text style={styles.text}>Ngày đến hạn:
            <Text style={styles.subText}>{item.deadline}</Text>
          </Text>
         
        </View>
        <Text style={styles.text}>
          Người giám sát:
          <Text style={styles.subText}>{item.supervisor.map((item) => item.name).join(', ')}</Text>
        </Text>
        <Text style={styles.text}>
          Thuộc văn bản:
          <Text style={styles.subText}>{item.document}</Text>
        </Text>
        <View style={{flexDirection: 'row', justifyContent: 'flex-end', marginTop:10}}>
          <Button
            title="Báo cáo"
            onPress={() => {}}
            backgroundColor={R.colors.orange}
            textColor={R.colors.white}
            fontSize={R.fontsize.fontSizeContent}

            height={35}
            width={100} 
            containerStyle={{marginRight: 10, borderRadius: 20}}
          />
          <Button
            title="Chi tiết"
            onPress={() => navigation.navigate(ScreenName.DETAILWORK)}  
            backgroundColor={R.colors.blue}
            textColor={R.colors.white}
            fontSize={R.fontsize.fontSizeContent}
            height={35}
            width={100} 
            containerStyle={{borderRadius: 20}}
          />
        </View>
      </View>
      </View>
    )
  };

  return (
    <View style={styles.container}>
      <Header title={'Danh sách công việc'} isBack />
      <View style={styles.body}>
        {renderTabView()}

        <View style={{marginBottom: 15, flex:1}}>
          <View style={styles.card}>
            <TouchableOpacity style={styles.btnCard}>
              <Text style={styles.text}>Học kỳ 2, Năm 2025</Text>
            </TouchableOpacity>
          </View>

          <View style={styles.box_3}>
            <View style={styles.searchBox}>
              <Image
                source={R.images.icSearch}
                style={{width: 20, height: 20}}
              />
              <View style={{flex: 1}}>
                <TextInput
                  placeholder="Tìm kiếm"
                  style={styles.text}
                  value={searchQuery}
                  onChangeText={setSearchQuery}
                />
              </View>
            </View>
            <View style={{flex: 0.1}}></View>

            <View style={styles.boxFilter}>
              <Dropdown title={'Tìm kiếm'} height={40} />
            </View>
          </View>
          <FlatList
            data={dataList}
            renderItem={renderListView}
            
            keyExtractor={item => item.id.toString()}
          />
        </View>
      </View>
      <FAB>
        <SubButton
          onPress={handleAddWork}
          label="Tạo công việc"
          images={R.images.icMenuEdit}
          backgroundColor={R.colors.blue}
        />
      </FAB>

      <AddWorkModal
        visible={modalVisible}
        onClose={handleCloseModal}
        onSave={handleSaveWork}
      />
    </View>
  );
};

export default ListWorkView;
