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

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

  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={{
              // marginHorizontal: 5,
              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>
     <FAB>
      <SubButton
        onPress={() =>({})}
        label="Tạo công việc"
        images={R.images.icMenuEdit}
        backgroundColor={R.colors.blue}
      />
     </FAB>
    </View>
  );
};

export default ListWorkView;
