/* eslint-disable prettier/prettier */
import CheckBox from '@react-native-community/checkbox';
import Moment from 'moment';
import React from 'react';
import {Dimensions, Image, SafeAreaView, View} from 'react-native';
import {BarChart} from 'react-native-chart-kit';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import SelectDropdown from 'react-native-select-dropdown';
import {ScrollView} from 'react-native-virtualized-view';
import AppText from '../../components/AppText';
import ButtonComponent from '../../components/ButtonComponent';
import LoadingProgress from '../../components/LoadingProgress';
import {IMAGES} from '../../values/images';
import {contentStyle, mainStyle, styles} from './style';
const WorkLoadScreen = ({
userDetails,
table,
openTimePicker,
timeFilter,
toggleCheckBox,
setToggleCheckBox,
showDatePicker,
hideDatePicker,
handleConfirm,
onSubmitFilter,
dataChart,
isLoading,
chooseMonth,
setChooseMonth,
nextPage,
prevPage,
infoTable,
lastPage,
payload,
firstPage,
}) => {
const chartConfig = {
backgroundGradientFrom: '#FFF',
backgroundGradientFromOpacity: 1,
backgroundGradientTo: '#FFF',
backgroundGradientToOpacity: 0.5,
color: () => '#ed642d',
labelColor: () => '#3d3737',
strokeWidth: 2, // optional, default 3
barPercentage: 1,
useShadowColorFromDataset: false, // optional
};
//console.log("table")
return (
<SafeAreaView>
<ScrollView nestedScrollEnabled={true}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'white',
marginTop: 10,
}}>
<AppText style={contentStyle.txtTitle}>
Thống kê phạm vi trong kỳ
</AppText>
<SelectDropdown
data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
defaultValue={chooseMonth.getMonth() + 1}
dropdownIconPosition={'right'}
buttonStyle={{
...styles.dropdown1BtnStyle,
width: '40%',
backgroundColor: 'white',
}}
onSelect={selectedItem =>
setChooseMonth(
new Date(`${selectedItem}/01/${new Date().getFullYear()}`),
)
}
dropdownStyle={{
...styles.dropdown1DropdownStyle,
}}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={{color: '#444', textAlign: 'center'}}
buttonTextStyle={{color: '#444', textAlign: 'center'}}
renderDropdownIcon={isOpened => {
return (
<Image
source={isOpened ? IMAGES.IcUpArrow : IMAGES.IcDownArrow}
style={{
width: 20,
height: 20,
marginRight: 10,
}}
/>
);
}}
/>
</View>
<ScrollView horizontal={true} style={mainStyle.viewChart}>
<View>
{dataChart && (
<BarChart
data={dataChart}
width={
dataChart && dataChart.labels.length > 10
? Dimensions.get('window').width +
(dataChart.labels.length / 2) * 100
: Dimensions.get('window').width
}
withInnerLines={false}
height={220}
chartConfig={chartConfig}
showValuesOnTopOfBars={true}
/>
)}
</View>
</ScrollView>
<View style={[mainStyle.viewChart, {marginBottom: 30}]}>
<AppText style={contentStyle.txtTitle}>Chi tiết chấm công</AppText>
<View style={{paddingLeft: 10, marginBottom: 20}}>
<View style={{flexDirection: 'row', marginBottom: 5}}>
{/* start */}
<View style={{flex: 1, marginRight: 10}}>
<AppText style={contentStyle.subText}>Từ ngày</AppText>
<ButtonComponent
style={[contentStyle.viewCalendar]}
text={Moment(timeFilter.start).format('DD/MM/YYYY')}
onPress={() => showDatePicker('start')}
iconSource={IMAGES.IcCalendarGray}
styleIcon={contentStyle.btnIcon}
/>
<AppText style={contentStyle.subText}>Lọc từ ngày...</AppText>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<CheckBox
disabled={false}
value={toggleCheckBox.start}
onValueChange={newValue =>
setToggleCheckBox({start: newValue})
}
/>
<AppText style={{fontSize: 12}}>
Chỉ hiện đi trễ, về sớm
</AppText>
</View>
<DateTimePickerModal
isVisible={openTimePicker.start}
mode="date"
date={timeFilter.start}
onConfirm={time => handleConfirm('start', time)}
onCancel={() => hideDatePicker('start')}
/>
</View>
{/* from */}
<View style={{flex: 1}}>
<AppText style={contentStyle.subText}>Đến ngày</AppText>
<ButtonComponent
style={contentStyle.viewCalendar}
text={Moment(timeFilter.finish).format('DD/MM/YYYY')}
onPress={() => showDatePicker('finish')}
iconSource={IMAGES.IcCalendarGray}
styleIcon={contentStyle.btnIcon}
/>
<AppText style={contentStyle.subText}>Lọc đến ngày...</AppText>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<CheckBox
disabled={false}
value={toggleCheckBox.finish}
onValueChange={newValue =>
setToggleCheckBox({finish: newValue})
}
/>
<AppText style={{fontSize: 12}}>Chỉ hiện đi trễ</AppText>
</View>
<DateTimePickerModal
isVisible={openTimePicker.finish}
mode="date"
date={timeFilter.finish}
minimumDate={timeFilter.start}
onConfirm={time => handleConfirm('finish', time)}
onCancel={() => hideDatePicker('finish')}
/>
</View>
</View>
<ButtonComponent
style={contentStyle.btnFilter}
text={'Lọc'}
textStyle={{color: 'white'}}
onPress={onSubmitFilter}
/>
<View style={{marginBottom: 20}}>
<View
style={{flexDirection: 'row', borderWidth: 0.2, padding: 5}}>
<AppText style={{flex: 2, fontWeight: '500'}}>Ngày</AppText>
<AppText style={{flex: 2, fontWeight: '500'}}>Giờ vào</AppText>
<AppText style={{flex: 2, fontWeight: '500'}}>Giờ ra</AppText>
<AppText style={{flex: 1, fontWeight: '500'}}>Tổng</AppText>
</View>
{table &&
table.length >= 1 &&
table.map((item, index) => {
return (
<View
key={index}
style={{
justifyContent: 'space-between',
borderWidth: 0.2,
padding: 5,
}}>
<View style={{flexDirection: 'row'}}>
<AppText
style={[
{flex: 2, fontWeight: '500', color: 'black'},
item.isError && styles.errText,
]}>
{item.date}
</AppText>
<AppText
style={[{flex: 2}, item.isError && styles.errText]}>
{item.time_input}
</AppText>
<AppText
style={[{flex: 2}, item.isError && styles.errText]}>
{item.time_output}
</AppText>
<AppText
style={[
{flex: 1, fontWeight: '500', color: 'black'},
item.isError && styles.errText,
]}>{`${item.total} giờ`}</AppText>
</View>
<View style={{flexDirection: 'row'}}>
<AppText
style={[{flex: 1}, item.isError && styles.errText]}>
Đi trễ{' '}
</AppText>
<AppText
style={[
contentStyle.boldTxt,
item.isError && styles.errText,
]}>
{item.time_work_late}
</AppText>
</View>
<View style={{flexDirection: 'row'}}>
<AppText
style={[{flex: 1}, item.isError && styles.errText]}>
Về sớm{' '}
</AppText>
<AppText
style={[
contentStyle.boldTxt,
item.isError && styles.errText,
]}>
{item.leave_early}
</AppText>
</View>
</View>
);
})}
</View>
</View>
{/* footer */}
{table && (
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginBottom: 50,
}}>
<AppText
style={{
marginRight: 10,
}}>{`${infoTable.from}-${infoTable.to} của ${infoTable.total}`}</AppText>
<ButtonComponent
style={{marginRight: 10}}
iconSource={
infoTable.total < 10 || payload.page == 1
? IMAGES.IcDoubleArrowLeftGrey
: IMAGES.IcDoubleArrowLeft
}
onPress={firstPage}
styleIcon={{width: 20, height: 20}}
disable={
infoTable.total < 10 || payload.page == 1 ? true : false
}
/>
<ButtonComponent
style={{marginRight: 10}}
iconSource={
payload.page == 1 || infoTable.total < 10
? IMAGES.IcArrowLeftGrey
: IMAGES.IcArrowLeft
}
onPress={prevPage}
styleIcon={{width: 20, height: 20}}
disable={
payload.page == 1 || infoTable.total < 10 ? true : false
}
/>
<ButtonComponent
style={{marginRight: 10}}
iconSource={
infoTable.isLastPage
? IMAGES.IcArrowRightGrey
: IMAGES.IcArrowRight
}
onPress={nextPage}
styleIcon={{width: 20, height: 20}}
disable={infoTable.isLastPage}
/>
<ButtonComponent
style={{marginRight: 10}}
iconSource={
infoTable.isLastPage
? IMAGES.IcDoubleArrowRightGrey
: IMAGES.IcDoubleArrowRight
}
onPress={lastPage}
styleIcon={{width: 20, height: 20}}
disable={infoTable.isLastPage}
/>
</View>
)}
</View>
{isLoading && <LoadingProgress />}
</ScrollView>
</SafeAreaView>
);
};
export default WorkLoadScreen;