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;
