import React, { useState } from 'react';
import {Text, View, TouchableOpacity, StyleSheet, Image, TextInput} 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';

const ListWorkView = (props) => {
  const { 
    searchQuery,
    setSearchQuery,
   } = props;
  
  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 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}
          />  
        )
  }

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

          <View style={{marginBottom: 15}}>
          <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>
        </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;
