import React, { Fragment, useState, useEffect, useLayoutEffect, useContext, useRef } from 'react';
import { ActivityIndicator, View, Text } from 'react-native';
import session from '~/Utils/session';
import fetchGet, { fetchPost, fetchDelete } from '~/Utils/fetch';
import { useToast, confirm } from '~/Components/UIControls/Message';
import Form from '~/Components/Form';
import Button from '~/Components/UIControls/Button';
import { useForm } from 'react-hook-form';
import BottomTabBarLayout from '~/Components/Layouts/BottomTabBarLayout';
import { UploadFileType } from '~/Components/UIControls/UploadFile';
import { usePopup } from '~/Components/UIControls/Popup';
import { useAuth } from '~/Components/Hooks';
import { WebView } from 'react-native-webview';
import { ListStyle } from '~/Components/Listing/Search';
import { Util } from '~/Utils/utils';
import Loading from '~/Components/UIControls/Loading';
import { Tab, TabHeader, TabTitleGroup, TabTitle, TabContent, TabItem } from '~/Components/UIControls/Tab';
import { Config } from '~/Configuration';
import moment from 'moment';
import { Selectbox } from '~/Components/UIControls/Selectbox';

let headerScript = ``;
headerScript += ``;

const Screen = ({navigation}) => {
    const refreshList = navigation.getParam('refreshList', ()=>{});
    const siteId = navigation.getParam('siteId', 0);
    const name = navigation.getParam('name', '');
    const contents = navigation.getParam('contents', '');
    const addDate = navigation.getParam('addDate', '');
    const year = moment(addDate).format('YYYY');
    const month = moment(addDate).format('MM');
    const [loading, setLoading] = useState(false);
    const [report, setReport] = useState('building');
    const { showMessage } = useToast();
    const reportList = useRef([
        { label: '빌딩개요', value: 'building' },
        { label: '인원현황', value: 'userInfo' },
        { label: '입주사관리(입주사현황)', value: 'tenantInfo' },
        { label: '입주사관리(층별현황 외)', value: 'tenantInfoFloor' },
        { label: '기온및설비관리(기온변동현황)', value: 'siteWeatherInfo' },
        { label: '기온및설비관리(설비가동현황)', value: 'facilityTime' },
        { label: '에너지사용량(전기)', value: 'energyUsageElect' },
        { label: '에너지사용량(가스/수도/기타)', value: 'energyUsageGasWater' },
        { label: '에너지요금분석(전기)', value: 'energyChargeElect' },
        { label: '에너지요금분석(가스/수도/기타)', value: 'energyChargeGasWater' },
        { label: '주차관리', value: 'ParkingManagement' },
        { label: '대관관리', value: 'RentalManagement' },
        { label: '사옥관리(법정검사)', value: 'LegalExamination' },
        { label: '사옥관리(당월 중점업무)', value: 'MonthlyPriorityWork' },
        { label: '사옥관리(개선보고서)', value: 'ImprovementReport' },
        { label: '사옥관리(익월 중점업무)', value: 'NextMonthPriorityWork' },
        { label: '비용', value: 'Cost' },
        { label: '주변현황', value: 'SurroundingStatus' },
    ]);

    return ( 
        <BottomTabBarLayout>
            <View style={{padding:5, flex:1}}>
                <View style={[ListStyle.vertical, {padding:10, borderBottomWidth:1, borderBottomColor:'#f0f0f0'}]}>
                    <Text style={[ListStyle.text]}>{name}</Text>
                    {!!contents && (
                        <Text style={[ListStyle.text]}>{contents}</Text>
                    )}
                    <Selectbox items={reportList.current} initialValue={report} onChange={(item) => {
                        setReport(item.value);
                    }} />
                </View>

                <WebView
                    originWhitelist={['*']}
                    source={{ uri: `${Config.BASE_URL}/report/index.html?report=${report}&siteId=${siteId}&year=${year}&month=${month}` }}
                    style={{ marginTop: 0, flex:1 }}
                />
            </View>

            {loading && <Form.Loading />}
        </BottomTabBarLayout>
    );
};

Screen.navigationOptions = ({navigation}) => { 
    const yearMonth = Util.toMonthString(navigation.getParam('addDate', ''), '', '.');
    return { 
        header: () => (
            <Header 
                navigation={navigation} 
                title={`월간보고서 ${yearMonth}`}
                main={false}
            /> 
        )
    } 
};

export default Screen;